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内 容 提 要 





本 书 自 第 1 版 至 今 , 一 直 是 讲解 HTML 和 CSS 入 门 知识 的 经 典 畅 销 书 ， 全 面 系统 地 闸 述 HTML5 和 CSS3 
基础 知识 以 及 实际 运用 技术 ,通过 大 量 实例 深入 浅 出 地 分 析 了 网 页 制作 的 方方面面 。 最 新 第 8 版 不 仅 介绍 了 
文本 、 图 像 、 链 接 、 列 表 、 表 格 、 表 单 等 网 页 元 素 ， 还 介绍 了 如 何 为 网 页 设计 布局 、 添 加 动态 效果 等 ， 另 
外 还 涉及 调试 和 发 布 。 本 书 提供 了 一 个 强大 的 配套 网 站 ， 上 面 列 出 了 书 中 的 完整 代码 示例 以 及 更 多 优秀 实 
例 及 进 阶 参考 资料 ， 以 供 读者 参考 学 习 。 

通过 学 习 本 书 ， 零 起 点 读者 即 可 创建 网 站 ， 而 中 高 级 水 平 的 开发 人 员 也 可 以 快速 了 解 HTMLS 新 元 
素 、CSS3 的 奇幻 效果 、 响 应 式 Web 设 计 以 及 各 种 最 佳 实践 。 
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译 者 厅 





HTML 和 CSS 是 万 维 网 的 根基 。 几 年 前 ， 遵 循 Web 标 准 之 风 盛 行 ， 网 页 结构 与 表现 分 离 成 为 共识 ， 
网 站 开发 人 员 普 裔 开始 采用 渐进 增强 的 最 佳 实 践 ， 业 内 对 HTML 和 CSS 的 认 知 度 和 重视 度 都 得 到 了 一 次 
跨越 式 的 提升 。 近 年 来 ， 随 着 HTML5 和 CSS3 技 术 的 快速 发 展 ，HTML 和 和 CSS 被 赋予 更 强 的 功能 性 ， 它 
们 的 地 位 又 到 了 前 所 未 有 的 高 度 。 

HTML 和 CSS 的 发 展 与 变化 ， 主 要 体现 在 两 个 方面 。 一 是 编写 代码 的 方式 有 变化 ， 例 如 ， 现 在 的 
智能 手机 普遍 采用 像 双 密度 极 高 的 Retina 显 示 屏 ， 如 果 还 用 过 去 的 方式 在 网 页 中 插入 图 像 ， 这 些 图 像 
在 手机 上 就 会 显得 不 够 锐利 和 清晰 ， 因 此 我 们 有 必要 改变 编写 img 标 签 的 方式 (参见 本 书 5.8 节 ) 。 
二 是 新 的 技术 取代 了 传统 手段 ， 例 如 ， 过 去 为 了 对 标题 等 特殊 文本 使 用 不 一 样 的 字体 ， 产 生 了 图 像 
替换 文本 的 方法 ， 现 在 ， 随 厦 Web 字 体 技术 的 成 束 ， 人 们 可 以 使 用 更 为 简单 、 优 雅 的 方式 实现 上 述 
效果 《〈 人 参见 本 书 第 13 草 ) 。 

过 去 的 经 验 告诉 我 们 ， 对 于 Web 开 发 初学 者 来 说 ， 从 一 开始 就 学 习 最 新 技术 和 最 佳 实践 ， 既 可 以 市 
省 时 间 ， 也 有 利于 培养 良好 的 编码 习惯 ( 因为 避免 了 那些 过 时 的 编码 方式 和 陈旧 的 技术 手段 的 干扰 ) 。 

本 书 是 HTML 与 CSS 经 典 入 门 教程 ， 目 前 已 更 新 至 第 8 版 (第 1 版 出 版 于 18 年 前 的 万 维 网 兴起 之 
初 ) 。 跟 过 去 的 所 有 版 本 一 样 ， 本 次 新 版 也 力图 反映 最 新 的 编码 实践 与 技术 。 相 较 于 上 一 版 ， 这 一 
版 几乎 对 全 书 的 每 个 章节 都 有 更 新 一 一 删除 了 一 些 过 时 的 做 法 ， 增 加 了 不 少 新 的 提示 与 补充 材料 ， 
大 部 分 代码 示例 都 进行 了 重 写 ( 相应 的 浏览 絮 截 图 也 都 做 了 更 新 ) 。 第 8 版 不 仅 增加 了 一 些 新 的 知识 
板块 ( 例如 创建 和 使 用 为 Retina 显 示 屏 准备 的 图 像 ， 通 过 使 用 可 伸缩 图 像 、 弹 性 布局 和 媒体 查询 实现 
啊 应 式 网 站 等 ) ， 还 重新 梳理 了 一 些 重点 知识 (例如 对 CSS 层 车 规则 的 讲解 就 重新 整理 了 特殊 性 、 顺 
序 和 重要 性 的 关系 ) 。 

这 套 教程 的 经 典 之 处 是 独特 的 分 步 讲 解 形式 ， 贯 窥 全书 的 统一 示例 ， 以 及 通过 提示 和 补充 材料 给 
出 的 丰富 的 扩展 学 习 资 源 ， 因 此 对 初学 者 而 言 ， 这 套图 书 历来 是 学 习 效 率 的 保证 。 新 版 不 仅 保 留 了 这 
些 经 典 的 做 法 ,还 紧 跟 技术 发 展 对 内 容 做 了 全 面 更 新 ， 如 果 你 是 Web 开 发 与 设计 的 初学 者 ， 没 有 理由 
不 将 此 书 作为 唯一 的 HTML 与 CSS 入 门 书 。 

最 后 ， 信 此 机 会 ， 感 谢 图 灵 公 司 对 我 的 信任 与 文 持 ， 感 谢 刘 美英 编辑 ， 感 谢 她 付出 艰 茸 的 努力 ， 
确保 了 本 书 按时 出 版 。 
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且 


无 论 你 是 刚 开始 涉足 网 站 制作 ， 还 是 曾经 做 
过 网 站 、 而 今 又 想 让 自己 的 技能 与 时 俱 进 ， 都 会 
对 这 个 领域 振奋 人 心 的 进展 感同身受 。 

在 过 去 的 几 年 里 ， 为 网 页 编写 代码 和 添加 样 
式 的 方式 、 浏 览 网 页 所 用 的 浏览 妖 以 及 使 用 浏览 絮 
的 设备 都 发 生 了 明显 的 变化 。 以 前 ， 我 们 只 能 通 
过 台式 机 或 笔记 本 浏览 万 维 网 ， 而 如 今 我 们 可 以 
通过 很 多 设备 访问 万 维 网 : 手机 、 平 板 电 脑 ， 当 
然 也 包括 笔记 本 、 人 台式 机 ， 以 及 很 多 别 的 设备 。 

这 是 意料 之 中 的 事 ， 因 为 万 维 网 始终 秉持 消 
除 边 界 的 宗旨 一 一 无 论 是 在 城市 还 是 在 乡村 ， 通 
过 任何 能 访问 万 维 网 的 设备 ， 任 何人 都 可 以 自由 
地 分 享 和 获取 信息 。 总 之 ， 万 维 网 的 宗旨 是 普 适 
性 。 万 维 网 的 覆盖 范围 不 断 扩大 ， 过 去 ， 通 信 技 
术 还 未 曾 普 及 农村 ， 而 现在 却 已 经 实现 了 。 

更 伟大 的 是 ， 万 维 网 是 属于 每 一 个 人 的 , 任 
何人 都 可 以 自由 地 创建 和 发 布 网 站 。 本 书 将 指导 读 
者 创建 和 发 布 网 站 ， 是 没有 任何 HIML 和 CSS 知 识 
的 建站 初学 者 的 理想 教程 。 书 中 内 容 结构 清晰 ， 
浅显 易 履 ， 将 一 步 一 步 地 教会 你 如 何 创建 网 页 。 
总 之 ， 本 书 是 开发 人 员 手 头 案 边 的 必 备 指南 。 知 
想 了 解 某 个 主题 的 更 多 信息 ， 可 以 通过 查找 目录 
直接 跳 到 相关 页 面 。 




















HTML 和 CSS 简介 


万 维 网 成 功 的 根基 ， 有 是 一 种 基于 文本 的 标 
记 语言 ， 它 简单 多 和 学， 并 且 能 被 任何 带 有 基本 





ll 


Web 浏 昂 硕 的 设备 识 读 ， 它 就 是 HTML。 每 个 网 
页 都 或 多 或 少 会 用 一 点 儿 HTML， 否 则 也 就 不 能 
称 为 网 页 了 。 

随 着 不 断 深 入 细致 地 学 习 ， 你 会 了 解 
到 ，HTML 用 于 定义 内 容 的 含义 ， 而 CSS 用 于 和 定 
义 内 容 和 网 页 如 何 显 示 。HTML 页面 和 CSS 文 件 
(样式 表 ， stylesheet ) 都 是 文本 文件 ， 因 此 很 容 
多 编辑。 后 面 的 “如 何 学 习 本 书 ” 会 回 你 展示 一 
些 HTML 和 CSS 的 代码 片段 。 

从 第 1 草 起 ， 我 们 开始 学 习 基 本 的 HTML 页 
面 ; 从 第 7 章 起 学 习 用 CSS 定 义 页 面 样 式 。 关 于 
本 书 各 章 内 容 概 述 及 主题 汇总 ， 请 参见 “本 书 
涉及 内 容 ”。 

HTML 一 词 通常 沁 指 这 门 语言 本 对， 而 HTMLS5 
则 指 代 这 一 特定 版 本 的 HTML， 比 如 讨论 HTML 
早期 版 本 所 没有 的 HTML5 新 特性 时 。 这 样 的 规 
则 也 适用 于 CSS ( 泛 指 ) 和 CSS3 ( 特 指 CSS3 ) 。 

1. HTML 与 HTML5 

了 解 一 些 有 关 HTML 起 源 的 基础 知识 对 于 理 
解 HTMLS 很 有 帮助 。 

HTML 诞 生 于 20 世 纪 90 年 代 初 ， 用 于 详细 规 
定 少量 构建 网 页 的 元 素 。 这 些 元 素 中 的 大 多 数 都 
用 于 摘 述 网 页 内 容 ， 如 标题 、 段 落 、 列 表 、 指 加 
其 他 网 页 的 链接 等 。 随 着 更 多 元 素 的 引入 以 及 对 
语法 规则 本 身 的 调整 ，HTML 这 门 语言 的 版 本 号 也 
在 更 新 。 当 前 最 新 的 版 本 便 是 HTML5。 

HTML5 是 HTML 早 期 版 本 的 自然 延续 ， 它 
尽 可 能 地 满足 了 当前 网 站 和 未 来 网 站 的 需求 。 它 
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从 以 前 的 版 本 中 继承 了 大 部 分 特性 ， 这 意味 着 ， 
如 果 你 在 HTMLS5 出 现 之 前 编写 过 HTML ， 那 么 
你 已 经 知道 很 多 关于 HTML5 的 知识 了 。 这 也 意 
味 着 ，HTML5 的 大 部 分 内 容 都 可 以 兼容 新 旧 浏 
览 器 。 向 后 兼容 是 HTMLS 的 一 项 重要 设计 原则 
(参见 www.w3.org/TR/html-design-principles/ ) 。 

HTML5 还 增加 了 大 量 新 的 功能 。 很 多 新 功 
能 都 很 简单 ， 比 如 用 于 描述 内 容 的 辅助 元 素 〈 如 
article、main、figure 等 ) ; 还 有 一 些 用 来 协助 创 
建 强 大 Web 应 用 程序 的 新 功能 则 较为 复杂 。 只 有 
牢 牢 掌握 了 创建 网 页 的 技能 ， 才 能 去 学 习 HTML5 
更 复杂 的 功能 ， 这 也 是 本 书 强 调 基 础 知识 的 原 
因 。HTML5 还 引入 了 原生 的 音频 和 视频 播放 功 
能 ， 书 中 也 会 讲 到 。 

2 已 SS 二 CSS35 

CSS 的 第 一 个 版 本 是 在 HTML 诞 生 几 年 后 才 
出 现 的 ， 正 式 推 出 是 1996 年 。 同 HTMLS 与 其 早 
期 版 本 的 关系 一 样 ，CSS3 也 是 CSS 早 期 版 本 的 

CSS3 比 CSS 早 期 版 本 更 为 蝇 大 ， 它 引入 了 大 
量 的 视觉 效果 ， 如 阴影 、 圆 角 、 渐 变 等 。〈 关 于 
本 书 涵 盖 这 方面 信息 的 详细 情况 ， 请 参见 “本 书 
涉及 内 容 ”。 ) 














Web 浏览 器 


无 论 是 使 用 电脑 ( 如 图 0.2.1 所 示 ) 、 手 机 ， 
还 是 其 他 的 设备 ， 我 们 都 是 通过 Web 浏 览 硕 访问 
网 站 的 。 不 过 ， 你 使 用 的 浏览 需 可 能 与 其 他 用 户 
使 用 的 浏览 器 不 同 。 

Windows 预 痊 了 人 微软 公司 的 浏览 妖 Internet 
Explorer，OS X 则 预 污 了 苹果 公司 的 浏览 人 各 Safari。 
不 过 ， 用 户 可 以 免费 下 载 其 他 浏览 右 茶 换 上 
面 的 两 种 浏览 右 ， 如 Chrome (谷歌 出 品 ) 、 
Firefox ( Mozilla 出 品 ) 、Opera (Opera 出品 ) 。 
以 上 讨论 的 都 是 用 于 加 面 电脑 的 浏览 妖 。 
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图 0.2.1 Firefox 的 捍 面 版 





至 于 移动 设备 ， 用 户 可 以 使 用 Safari 的 移动 版 
( 用 于 iPhone 、iPad 和 iPodtouch ) ， 各 种 Android 


默认 浏览 器 一 一 用 于 Android 的 Chrome 、Firefox 以 
及 Opera Mini 等 。 


本 书 会 提 到 各 种 各 样 的 浏览 如 。 在 大 多 数 情 
况 下 ， 各 个 浏览 需 的 最 新 版 本 对 本 书 所 讲 的 HIML 
和 CSS 特 性 的 文 持 情 况 都 是 相似 的 。 不 过 有 时 某 个 
特性 可 能 在 一 个 或 多 个 浏览 器 上 不 起 作用 (或 表现 
不 一 致 ) 。 出 现 这 些 情况 我 会 进行 提示 ， 并 给 出 
解决 办 法 。 这 类 情况 主要 发 生 在 Internet Explorer 8 
上 ,这 是 目前 开发 人 员 还 有 必要 关注 的 浏览 旭 中 
最 老 的 一 个 。( 它 的 使 用 率 仍 在 不 断 降低 ， 因 此 
2014 年 前 后 这 种 情况 可 能 发 生 改 变 。 ) 

20.2 节 会 详细 说 明 如何 获 取 不 同 的 训 览 需 ， 
哪些 浏览 器 对 测试 最 重要 ， 以 及 如 何 测试 页 面 
等 问题 。 

















浏览 器 的 版 本 号 
同 HIML 和 和 CSS 一样 ， 浏 览 器 也 有 版 本 号 。 
版 本 号 的 数字 越 大 ， 对 应 的 浏览 器 就 越 新 。 
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W3C 发 布 的 说 明 Web 标 准 的 文档 称 为 规 


例如 ，Safari 7 比 Safari 6 要 新 ， 而 Safari 6 范 (specification， 缩 写 为 spec ) 。 这 些 规范 对 


用 。 大、 

则 比 Safari Internet Explorer 人 HTML 、CSS 等 语言 的 参数 进行 了 定义 。 也 就 是 
Re 9 新 。 不 过 Internet Explorer 10 并 不 比 说 ， 规 范 对 语言 规则 进行 了 标准 化 。 要 了 解 W3C 
Safari 7 新 。 的 活动 ， 请 访问 www.w3.org ( 如 网 0.3.1 所 示 ) 。 


出 现 这 种 情况 是 因为 微软 、 革 果 以 及 其 他 
人 览 器 厂商 并 不 会 相互 协调 各 自 浏 览 器 的 版 本 
， 也 不 会 协商 新 版 浏览 器 的 发 布 时 间 。Chrome 
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WEB DESIGN AND APPLICATIONS 


器 大 约 要 间隔 一 年 才 更 新 一 次 ， 因 此 Chrome 
和 Firefox 的 版 本 号 自然 比 其 他 浏览 器 的 版 本 
号 要 大 得 多 。 

很 明显 ， 无 论 是 哪 家 厂商 发 布 浏览 器 ， 
新 版 本 的 浏览 器 对 HTML 和 CSS 特 性 的 支持 情 
况 (当然 也 包括 对 其 他 特性 的 支持 情况 ) 都 
要 好 过 先前 的 版 本 。 


Web 标准 与 规范 


你 可 能 在 想 ， 是 谁 第 一 个 创造 了 HTMEL 和 
CSS， 又 是 谁 在 持续 地 发 展 它们 。 由 万 维 网 和 
HTML 的 发 明 者 Tim Berners-Lee 主 持 的 万 维 网 联 图 0.3.1 W3C 的 网 站 是 业内 Web 标 准 规范 的 主要 
盟 〈(W3C ) 便 是 负责 带领 Web 标 准 发 展 的 组 织 。 言 县 来 源 











W3C 与 WHATWG 


由 于 种 种 原因 ， 另 一 个 组 织 ，Web 超 文本 应 用 技术 工作 组 (WHATWG ) ， 在 负责 开发 HTML5 
规范 的 大 量 内 容 。W3C 将 WHATWG 的 工作 纳入 了 其 正在 开发 的 规范 的 正式 版 本 之 中 。 可 以 通过 
Www.whatwg.org 巧 辣 WHATWG。 
如 果 你 想 仔细 查看 这 些 规范 ( 推荐 你 这 样 做 ) ， 可 访问 下 面 列 出 的 这 些 规范 最 新 版 本 的 网 址 。 
OD HIML5 (W3C) 
http:/wWwww.w3.org/TR/html$/ 

D HTML5.1 (W3C) 
http://Wwww.w3.org/TR/htmlS 1/ 

口 开发 中 的 HTML 标 准 (WHATWG ) 


http:/www.whatwg.org/specs/web-apps/current-work/multipage/ 
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开发 中 的 HTML 标 准 包 含 了 一 些 比 HTML5.1 规 范 更 新 的 特性 ， 这 些 特性 尚 处 于 开发 状态 (很 多 


部 分 还 在 不 断 变动 ) 。 最 终 ， 


这 些 内 容 会 融入 HTMLS.1 规 范 。 


CSS 的 规范 太 多 了 ， 无 法 全 部 列 在 这 里 ， 不 过 可 以 通过 这 个 网 址 找到 CSS 规 范 的 列表 : http:/ 


www.w3.0rg/standards/techs/css#w3c_all。 


HTML4 和 HTML5 的 区 别 


如 果 你 之 前 接触 过 HTMILA4， 并 想 了 解 它 与 HTML5 的 区 别 ， 可 以 查看 W3C 为 此 创建 的 文档 (http:// 


www.w3.org/TR/html5-diff ) 。 


本 书 会 提 到 很 多 HTML4 和 HTMLS 的 区 别 。 这 些 内 容 对 HTML 的 初学 者 来 说 并 不 重要 ， 因 为 实 


际 上 现在 大 家 都 会 使 用 HTMLS。 不 过 ， 如 果 你 想 进一步 研究 ， 这 些 内 容 也 很 有 趣 。 


利用 已 经 完成 的 标准 ， 我 们 可 以 根据 一 套 成 
形 的 规则 创建 网 页 ， 而 浏览 硕 也 能 根据 这 套 规 则 
显示 这 些 页 面 。(〈 整 体 上 ， 浏 览 硕 对 标准 的 文 持 
是 良好 的 。Internet Explorer 的 早期 版 本 ， 尤 其 是 
Internet Explorer 8， 则 存在 一 些 问题 。 ) 

经 过 几 个 阶段 的 发 展 ， 规 范 最 终 会 被 确定 
下 来 ， 成 为 推荐 标准 (Recommendation ，www. 
w3.0re/2005/10/Process-20051014/tr ) 。 

尽管 一 部 分 HIML5 和 CSS3 规 范 仍 未 最 终 敲 定 ， 
但 这 并 不 意味 痢 你 不 能 使 用 这 些 规范 。 标 准 化 的 
过 程 需 要 经 历 一 些 时 间 (准确 地 说 需要 数 年 ) 。 
浏览 禹 会 在 规范 成 为 推荐 标准 之 前 很 久 便 实 现 其 
功能 ， 这 也 是 规范 发 展 过 程 的 反映 。 因 此 ， 训 览 
器 已 经 包括 了 大 量 HTML5 和 CSS3 的 功能 ， 尽 管 它 
们 还 没有 成 为 推荐 标准 。 

总 之 ， 本 书 涉及 的 功能 都 是 规范 中 相对 明确 
规定 的 ， 因 此 它们 在 推荐 标准 推出 之 前 发 生 改 变 
的 可 能 性 极 小 。 很 多 HTML5 和 CSS3 功 能 已 经 实 
际 使 用 一 段 时 间 了 ， 开 发 者 完全 可 以 放心 使 用 。 


渐进 增强 : 一 种 最 佳 实践 


我 在 前 言 的 开头 处 就 讲 到 了 万 维 网 的 普 适 
性 一 一 万 维 网 上 的 信息 应 该 能 被 所 有 人 访问 。 
渐进 增强 (progressive enhancement ) 的 理念 能 
帮助 你 构建 具有 普 适 性 的 网 站 。 这 不 是 一 门 语 
































言 ， 而 是 一 种 建站 方法 ， 它 由 Steve Champeon 于 
2003 年 提出 ( http://en.wikipedia.org/wiki/Progres- 
sive _ enhancement ) 。 

这 个 想法 很 简单 ， 但 也 很 强大 : 开始 用 所 
有 人 都 能 访问 的 HTML 内 容 和 行为 构建 网 站 ( 如 
图 0.4.1 所 示 ) ， 再 用 CSS 加 入 你 的 设计 ( 如 
图 0.4.2 所 示 ) ， 最 后 用 JavaScript (一 种 编程 语 
言 ) 添加 额外 的 行为 。 这 些 组件 都 是 分 离 的 ， 但 
可 以 同时 发 挥 作 用 。 








Le Journal 





Le journal 


The City Named After Queen Victoria 





An hour and a half aboard a comfortable car ferry is all it takes to transport you from 
the modern, urban space that is Greater Vancouver to colonial Vancouver Island, 
seemingly stuck in the 18th century. The main town of Victoria showcases all the 
picturesque gems the British Empire Was so proud of at the height of its spanning 
expansion. Representative yet inviting Victorian style municipal buildings, a protected 
harbor and cobblestone streets populated with small shops and ... Read More 


图 0.4.1 ”一 个 基本 的 HTML 页 面 ， 未 对 其 应 用 任何 
自 定义 的 CSS。 通 常 ， 只 有 比较 旧 的 浏览 器 才 会 以 
这 种 方式 显示 。 这 个 页 面 可 能 并 不 是 很 好 看 ， 但 信 
息 都 是 可 访问 的 ， 这 一 点 非常 重要 
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图 0.4.2 ”同一 个 页 面 在 支持 CSS 的 浏览 磊 中 的 显 
示 效 果 。 信 息 是 相同 的 ， 只 是 呈现 的 方式 不 同 (将 
页 面 问 下 滚动 ， 右 侧 内容 在 图 0.4.1 中 也 是 可 见 的 ) 











更 多 例子 

遵循 渐进 增强 的 原则 ， 可 以 让 网 站 的 布 
局 适应 不 同 设备 的 屏幕 尺寸 和 浏览 器 功能 。 这 
样 ， 网 页 在 移动 设备 、 虽 面 电脑 甚至 更 高 级 的 
设备 上 看 起 来 都 很 不 错 。 如 果 你 对 这 个 主题 很 
感 兴趣 ， 可 以 先 阅读 第 12 章 。 

第 14 章 介绍 了 如 何 让 旧 的 浏览 器 显示 简 
化 的 设计 而 现代 浏览 器 显示 包含 CSS3 效 果 的 
增强 版 本 。 

在 本 书 的 其 他 部 分 ， 你 也 会 学 到 用 于 构建 
渐进 增强 网 页 的 其 他 技术 。 


这 样 做 的 结果 就 是 ,那些 只 能 访问 基本 页 
面 的 设备 和 浏览 絮 得 到 的 是 简化 的 、 默 认 的 体验 
( 如 图 0.4.1 所 示 ) 。 即 便 是 20 多 年 前 万 维 网 刚 诞 
生 时 的 浏览 右 也 能 显示 这 个 页 面 ， 因 此 最 早 配 备 
Web 浏 览 器 的 手机 也 能 显示 它 。 此 外 ， 屏 幕 阅读 
器 〈 可 以 为 视 隐 访问 者 谈 出 网 页 内 容 的 软件 ) 也 
能 轻松 地 处 理 这 个 页 面 。 

同时 ， 那 些 能 够 浏览 更 健壮 的 网 站 的 设备 和 
浏览 器 将 看 到 增强 的 版 本 ( 如 图 0.4.2 所 示 ) 。 还 
有 一 些 浏 览 需 的 处 理 能 力 介 于 二 者 之 间 ， 它 们 也 
能 显示 这 个 页 面 。 不 必要 求 网 站 对 所 有 人 来 说 体 
验 都 是 一 样 的 ， 关 键 是 网 站 的 内 容 是 可 访问 的 。 




















目标 读者 


本 书 假定 读者 没有 任何 创建 网 站 的 知识 。 因 
此 ， 从 这 一 点 上 说 ， 本 书 适 合 零 起 点 初学 者 。 你 
将 从 最 基础 的 HTML 和 CSS 知 识 学 起 。 在 这 个 过 
程 中 ， 你 也 会 学 到 HTMLS 和 CSS3 的 新 特性 ， 尤 
其 是 那些 设计 师 和 开发 者 在 日 党 工作 中 经 常用 
到 的 特性 。 

不 过 ， 即 使 你 对 HTML 和 CSS 很 熟悉 ， 依 然 
可 以 从 本 书 获 益 ， 阅 读本 书 可 以 快速 了 解 HTML5 
的 新 元 素 、 一 些 CSS3 效 果 、 啊 应 式 Web 设 计 以 及 
各 种 最 住 实践 。 

1. 本 书 涉及 内 容 

全 书 各 章 是 按照 如 下 方式 进行 组 织 的 。 

口 第 1 和 草 ~ 第 6 草 及 第 15 草 ~ 第 18 章 讲解 创 

建 HTML 页 面 的 原则 和 我 们 需要 使 用 的 
HTML 元 素 ， 并 清楚 地 说 明 什 么 时 候 该 
使 用 这 些 元 素 ， 以 及 如 何 使 用 。 


























口 第 7 章 ~ 第 14 章 讲解 CSS， 从 创建 第 一 条 
样式 规则 开始 ， 最 终 讲 到 运用 CSS3 增 强 
视 沉 效果。 

口 第 19 章 演示 如 何 回 页 面 添加 预先 写 好 的 
JavaScript。 


口 第 20 草 讲解 在 将 页 面 放 到 万 维 网 上 之 前 
如 何 对 其 进行 测试 和 调试 。 

口 第 21 章 讲解 如 何 保护 上 自己 的 域名 ， 以 及 
如 何 把 网 站 放 到 万 维 网 上 让 其 他 所 有 人 
都 能 看 到 。 

本 书 涵盖 以 下 主题 。 

口 创建 、 保 存 、 编 辑 HTML 和 CSS 文 件 。 

口 编写 语义 化 HTML 的 含义 及 其 重要 性 。 

口 如 何 把 页 面 的 HTML 内 容 、CSS 表 现 和 
JavaScript 行 为 分 离 ( 这 是 渐进 增强 的 关 
键 所 在 ) 。 
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前 言 


口 通过 一 种 有 含义 的 方式 ， 使 用 那些 存在 
多 年 的 HTML 元 素 和 新 增 的 HTML5 元 素 
对 内 容 进 行 结 构 化 。 

口 从 一 个 网 页 链接 到 为 一 个 网 页 ， 或 从 页 
面 的 一 部 分 链接 到 为 一 部 分 。 

口 在 页 面 中 添加 图 像 ， 并 针对 万 维 网 对 其 
进行 优化 。 这 其 中 还 包括 了 创建 适应 苹 
末 的 Retina 显 示 屏 及 其 他 高 分 辨 座 显 示 
屏 的 图 像 。 

口 使 用 ARIA (无 障碍 定 因 特 网 应 用 ) 地 标 
角色 和 其 他 好 的 编码 实践 提升 网 站 的 可 
访问 性 。 

口 为 文字 添加 样式 (大 小 、 颜 色 、 粗 体 、 
和 斜体 等 ) ， 添 加 理 景 颜色 和 背景 图 像 。 

口 实现 多 芒 布 局 。 

口 构建 啊 应 式 网 页 。 啊 应 式 网 页 可 以 根据 访 
问 者 的 屏 大 大 小 收缩 或 放大 布局 ， 从 而 按 
照 开发 者 希望 的 方式 适应 不 同 的 设备 。 这 
样 做 的 结 采 是 页 面 在 手机 、 平 板 电脑 、 笔 
记 本 电脑 、 人 台式 机 以 及 其 他 可 访问 万 维 网 
的 设备 上 看 起 来 效 采 都 很 不 错 。 

口 使 用 efont-face 为 页 面 添 加 目 定 义 Web 字 
体 ， 使 用 Font Squirrel 和 Google Fonts 提 供 
的 字体 服务 。 

口 应 用 CSS3 效 果 ， 如 透明 度 、 背 景 alpha 透 
明 、 渐 变 、 圆 角 、 外 阴影 、 内 阴影 、 文 
字 阴 影 以 及 多 背景 图 像 。 

口 使 用 CSS 生 成 内 容 和 sprite 以 减少 页 面 所 
需 图 像 文件 的 数量 ， 让 页 面 加 载 得 更 快 。 

口 创建 表单 来 获取 访问 者 输入 的 内 容 ， 包 
括 使 用 一 些 HTML5 中 新 增 的 输入 类 型 。 

口 使 用 HTML5 的 audio 和 video 元 素 向 页 
面 插入 媒体 ， 对 旧 的 浏览 需 使 用 备用 的 
Flash 播 放大 。 

口 还 有 很 多 主题 。 

这 些 主题 都 配 有 很 多 代码 示例 ， 说 明 如 何 基 于 


























业内 最 佳 实践 来 实现 HTML5 和 CSS3 的 各 个 特性 。 
2. 本 书 未 涉及 内 容 
近年 来 ，HIML 和 CSS 领 域 的 发 展 很 迅猛 ， 我 
们 不 得 不 舍弃 一 些 主题 。 除 了 几 处 例外 ， 我 们 坚 
持 把 那些 极 少 用 到 、 仍 可 能 变化 、 缺 乏 广 泛 浏览 
售 支 持 或 者 需要 JavaScript 知 识 的 主题 ， 以 及 一 些 
高 级 主题 排除 在 本 书 范 围 以 外 。 
本 书 没 有 涉及 下 列 主题 。 
D 口 HTMLS5 的 details、summary 、menu、 
command 、output 和 keygen 元 率 。W3C 将 
其 中 的 几 个 元 素 列 入 了 2014 年 HTML5 最 
终 定 稳 时 可 能 不 包含 的 功能 ， 应 该 尽量 
避免 使 用 这 里 提 到 的 元 素 。 
口 HIMLS 的 canvas， 这 个 元 际 人 允许 我 们 使 用 
JavaScript 绘 制图 像 〈 甚 至 创建 游戏 ) 。 此 
外 ， 还 有 可 缩放 天 量 图 形 (SVG ) 。 第 17 
划 对 这 两 个 主题 进行 了 人 简要 说 明 ， 还 包含 
了 一 些 涉 及 相关 详细 信息 的 网 址 。 
口 需要 JavaScript 知 识 或 者 与 HTML5 新 增 的 
语义 化 元 素 没 有 直接 关联 的 HIML5 API 和 
其 他 高 级 特性 。 
口 CSS3 变 换 、 动 画 和 过 渡 效 果 。 要 了 人 解 更 多 
信息 ， 参 风 www.htmlcssvqs.com/resources/。 
口 CSS3 中 新 的 布局 模型 ， 如 FlexBox、Grid 
等 。 这 些 技术 致力 于 改变 我 们 对 页 面 进 行 
布局 的 方法 〈 前 提 是 规范 进一步 发 展 ， 
浏览 带 的 支持 程度 更 高 一 些 ) 。 参 见 Zoe 
Mickley Gillenwater 的 演示 文档 ( www. 


slideshare.net/zomigi/css3-layout ) 和 Peter 






































Gasston 的 文章 ( www.netmagazine.com/ 


features/pros-guide-css-layouts ) 。 


如 何 使 用 本 书 


本 书 几 乎 所 有 章节 都 有 实战 代码 示例 (如 
图 0.6.1 和 图 0.6.2 所 示 ) 。 通 常情 况 下 ， 随 后 还 会 
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展示 这 些 代 码 对 应 的 页 面 在 浏览 器 中 显示 的 屏幕 
截图 ( 如 图 0.6.3 所 示 ) 。 


<body> 
<header class="masthead" role="banner"> 


<nav role="navigation"> 
<ul class="nav-main"> 
<li><a href="/" class="current- 
> page">Home</a></1i> 
<l1i><a href="/about/">About</a> 
</1i> 
<li><a href="/contact/">Contact 
</a></1i> 
</ul> 
</nav> 


</header> 


</body> 
</htm]> 





图 0.6.1 本 书 大 部 分 章节 都 给 出 了 一 些 HTML 代 码 
片段 ， 且 会 突出 显示 跟 相 应 章节 内 容 对 应 的 部 分 。 
省 略 写 (... ) 表示 出 于 简洁 而 省 略 的 额外 代码 或 内 
容 。 通 常 ， 可 在 其 他 代码 示例 中 看 到 省 略 的 部 分 








body { 
font-family: Georgia, "Times New Roman ， 
serif; 


} 
/* 站 点 导航 */ 


.nav-main { 
list-style: none; 
padding: .45em 0 .5em; 


.nav-main 1i { 
border-left: 1px solid #c8c8c8; 


} 


.nav-main a { 
color: #292929; 
font-size: 1.125em; 
font-weight: bold; 





图 0.6.2 ”如 果 示 例 有 CSS 人 代码， 会 将 它们 单独 显示 
出 来 ， 对 应 内 容 也 会 突出 显示 





> 
二 一 


王 | 去 


一 


a 


HOME 吉 攻 名 避 T CONTACT 








图 0.6.3 ”用 于 演示 代码 如 何 影 响 页 面 的 一 种 或 多 种 
浏览 各 的 屏 达 截 图 





大 多 数 屏 幕 规 图 用 的 都 是 当下 最 新 版 本 的 
Firefox。 不 过 ， 这 并 不 是 说 与 其 他 浏 贤 带 相 比 ， 
我 们 更 推荐 Firefox。 本 书 的 代码 示例 在 最 新 版 本 
的 Chrome 、Internet Explorer 、Opera 和 Safari 中 看 
起 来 都 是 相似 的 。 

代码 和 屏幕 截图 下 面 都 有 对 相应 HTMEL 元 
素 和 CSS 属 性 的 描述 ， 以 便于 对 示例 背景 进行 说 
明 ， 并 加 强 你 对 它们 的 理解 。 

在 很 多 情况 下 ， 你 会 发 现 只 要 理解 说 明和 代 
码 示例 就 可 以 使 用 HTML 和 CSS 特 性 了 。 但 如 果 你 
需要 关于 如 何 使 用 这 些 特 性 的 明确 指导 ， 也 可 以 
阅读 书 中 列 出 的 详细 步骤 。 

最 后 ， 大 部 分 草 方 都 有 一 些 提示 ， 为 读者 提 
供 额 外 的 用 法 信息 、 最 住 实践 、 对 本 书 相 关 部 分 
的 引用 、 对 其 他 资源 的 链接 等 。 





























本 书 约定 

本 书 逐 循 以 下 约定 。 

口 需要 开发 人 员 输 入 值 的 占 位 符 或 代码 以 
斜体 显示 。 大 多 数 占 位 符 出 现在 步骤 讲 
解 中 。 例 如 ， 输 入 padding: x， 这 里 的 x 
是 要 添加 的 内 边 距 。 

口 需要 准确 输入 的 代码 〈 即 HTML 和 CSS 
代码 ) 使 用 等 冤 字 体 ( 如 this font ) 。 

口 代码 图 中 的 季 头 (一 ) 代表 延续 上 一 行 
的 代码 ( 这 一 行 代码 由 于 篇 幅 原 因而 进 
行 了 折 行 ) ， 如 图 0.6.2 所 示 。 箭 头 并 非 
代码 的 一 部 分 ， 不 需要 输入 。 实 际 使 用 
中 应 该 连续 输入 这 一 行 代码 ， 而 无 需 像 
印刷 页 面 中 这 样 折 行 。 
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8 前 言 


口 对 于 首次 出 现 的 词 ， 在 定义 时 使 用 黑体 
显示 。 

口 正 是 对 InternetExplorer 的 简称 。 例 如 ，IE9 
与 Internet Explorer 9 同 义 。 

口 对 HTMLS 和 CSS3 最 新 特性 支持 较 好 的 浏览 
器 统称 为 现代 浏览 器 (modembrowser ) 。 
通常 , “Web 浏 览 硕 ”一 下 中 提 到 的 浏览 
右 的 最 新 版 本 都 属于 现代 浏览 带 (IE8 
除外 ) 。 

口 浏览 各 的 版 本 号 后 面 出 现 如 写 (+ ) 指 的 是 
该 版 本 及 其 之 后 的 所 有 版 本 。 例 如 ，IE8+ 
指 的 是 Internet Explorer 8 及 其 后 续 版 本 。 


本 书 配套 网 站 


本 书 的 配套 网 站 上 有 本 书 的 目录 、 本 书 涉 及 
的 (以 及 其 他 一 些 不 方便 放 入 书 中 的 ) 完整 代码 














示例 、 引 用 资源 的 链接 〈 以 及 一 些 额 外 资源 的 链 
接 ) 、 勘 误 表 等 。 

下 面 是 本 书 网 站 一 些 重要 页 面 的 URL。 

口 主页 : www.htmlcssvqs.com。 

口 代码 示例 : www.htmlcssvgqs.com/8ed/ 

examples/。 

读者 可 以 直接 在 网 页 上 查看 这 些 代 码 ， 也 可 
以 把 它们 下 载 到 上 自己 的 电脑 里 。 读 者 可 以 获取 书 
中 涉及 的 所 有 HTML 和 CSS 文 件 。 

有 时， 我 们 会 在 代码 里 插入 一 些 注释 ,解释 
对 应 代码 的 含义 和 用 法 。 限 于 篇 幅 ， 我 们 对 书 中 
大 量 的 代码 示例 进行 了 删 减 ， 但 配套 网 站 列 出 了 











完整 的 代码 。 
读者 可 随意 使 用 这 些 代码 ， 对 它们 进行 修改 
使 之 满足 目 己 项 目的 需要 。 





希望 该 网 站 对 你 有 用 。 
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致 











撰写 本 书 过 程 中 最 有 意思 的 就 是 与 很 多 优秀 
的 人 十 合作。 所 有 的 人 都 很 用 心 、 专 业 、 和 善 上 且 寓 
有 幽 软 感 ， 让 和 闭 书 成 为 乐事 。 没 有 他 们 的 努力 ， 
就 不 会 有 这 本 书 。 

将 最 诚 坝 的 感谢 献 给 以 下 各 位 。 

Nancy Aldrich-Ruenzel 和 Nancy Davis， 感 谢 
他 们 对 我 的 信任 。 

Cliff Colby， 感 谢 他 的 支持 ， 是 他 建立 了 我 
们 的 团队 ， 让 一 切 工作 井井有条 。 

Robyn Thomas， 感 谢 他 让 我 们 定 有 激情 地 工 
作 ， 对 内 容 提出 建议 ,严格 要 求 细 六 ， 并 不 断 给 
耶 我 们 或 励 。 

Scout Festa， 感 谢 她 简化 语言 的 能 力 以 及 对 
本 书 的 严厉 监督 ， 从 而 确保 了 全 书 的 语言 统一 、 
文字 优美 流畅 。 

Aubrey Taylor， 感 谢 他 的 众多 建议 和 技术 文 
持 。 这 些 内 容 对 读者 来 说 都 非常 有 用 。 

David Van Ness， 感 谢 他 细致 的 页 面 排版 工 
作 ， 他 的 工作 证 全 书 看 起 来 相当 漂亮 。 

Valerie Haynes Perry， 感 谢 他 创建 了 一 个 高 
效 的 索引 ， 可 供 读者 反复 查阅 。 

Peachpit 公 司 的 市 场 、 销 售 等 工作 人 员 ， 感 
谢 他 们 的 幕后 工作 让 本 书 得 以 面市 。 

Natalia Ammon， 感 谢 她 为 第 11 章 和 第 12 章 以 
及 其 他 一 些 位 置 设 计 的 课 亮 页 面 。 她 的 作品 地 址 


为 www.nataliaammon.com。 


























由 波士顿 棕熊 队 是 美国 波士顿 的 一 文 冰 球 队 。 一 一 译 者 注 


谢 


Zach Szukala， 感 谢 他 将 Natalia 推 荐 给 我 。 
Scott Boms、 Ian Devlin、 Seth Lemome、 Erik 


Vorhes 和 Brian Warren， 感 谢 他 们 对 本 书 上 一 版 


的 贡献 。 
Victor Gavenda， 感 谢 他 帮助 我 们 获取 必要 
的 软件 。 


Dan Cederholm、 Ethan Dunham、 Paul Irish 、 
Mark James、 Randy Jensen、 Julie Lamba. 
Fontfabric 、Google 和 Namecheap， 感 谢 他 们 人 允 
许 使 用 一 些 屏 幕 截图 和 设计 资源 ( 视 具 体 情况 
而 定 ) 。 

C.R. Freer， 感 谢 她 魔法 般 的 摄影 。 

我 的 家 人 和 朋友 ， 感 谢 他 们 的 救 励 ， 以 及 在 
写作 间 际 的 陪伴 。 感 谢 他 们 在 我 几 个 月 夜以继日 
的 写作 过 程 中 不 离 不 弃 。 

Robert Reinhardt， 和 前 几 版 中 的 致谢 一 样 ， 感 
谢 他 引领 我 接触 写作 ， 感 谢 他 建议 我 蓄 起 美 绒 。 

波士顿 标 能 队 ?， 感谢 他 们 在 我 写作 间 欣 页 
献 了 那么 多 激动 人 心 的 季 后 赛 。 

Web 社 区 的 人 们 ， 感 谢 他 们 分 享 技术 知识 ， 
从 而 让 他 人 获 益 (我 在 全 书 多 处 引用 了 他 们 的 
内 容 ) 。 

读者 朋友 ， 感 谢 你 们 让 我 唤起 日 己 当 初学 习 
HTML 和 CSS 的 记忆 ， 让 我 得 以 按照 最 能 让 你 们 受 
益 的 方式 讲解 这 些 内 容 。 感 谢 你 们 选择 本 书 作为 
踏 和 万维网 创作 世界 这 一 旅程 的 一 部 分 。 
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2 致 谢 


最 后 ， 特 别 感谢 Elizabeth Castro。 她 在 20 世 珍 叶 的 东西 ， 因 此 我 尤其 珍惜 使 用 这 一 书 名 让 读 
纪 90 年 代打 造 了 这 个 品牌 。 多 年 来 ， 本 书 一 版 再 ”者 学 习 HTML 和 CSS 的 机 会 。 
版 ， 为 无 数 该 者 提供 了 帮助 。 万 维 网 赋予 我 太 多 Bruce 
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Podcasts 


售后 日 


Image Transparency on Solid Background 





1 Image Transparency on Solid Ba... 


人 有 日 日 Image Transparency on Gradient Background 





a Image Transparency on Gradien... 





图 5.1.5 ” 纯 蓝 色 背 景 和 从 黑 到 红 渐 变色 背景 都 不 
是 星星 PNG 图 的 一 部 分 ， 它 们 只 是 用 CSS 癌 页 面 
的 body 添加 的 颜色 。 星 星 图 具有 alpha 透明 度 , 这样 ， 
无 论 背 景 是 纯色 、 渐 变色 ， 还 是 另 一 张 图 像 ， 就 都 
能 穿 透 ， 且 看 起 来 相当 “ 干 奖 ”。JPEG 无 法 实现 
这 一 点 ，GIF 仅 文 持 一 种 简单 的 透明 度 ， 殖 果 并 不 
太 好 【( 除非 背景 是 纯色 的 ) 




















5.1.2 标识 和 其 他 颜色 较 少 的 图 像 通常 保存 为 
PNG-8 格式 〈 也 可 以 保存 为 GIF 格式， 不 过 相 较 之 
下 PNG 更 好 一 些 ) 





CaiginaM Oneimizet, 2-Uo. 4-Up 


12 set B30 Kbps *o 


G2.39K 
l2 set Wm S56.6 Kbps 


图 5.4.4 这 里 的 修改 反映 的 是 左下 方 的 区 块 。 如 
果 保 存 它 ， 其 大 小 就 是 62.39K， 尽 管 在 图 5.4.2 中 
它 只 有 19.44K， 但 现在 它 的 边缘 更 锐利 了 ， 这 种 质 
量 上 的 提升 是 值得 的 。 这 里 还 修改 了 其 他 两 个 区 块 
的 设置 。PNG-8 (右上 ) 的 压缩 让 图 像 的 像素 化 程 
度 加 深 了 ， 而 且 文 件 大 小 (70.56K ) 也 比 JPEG 要 
大 。PNG-24 ( 右 下 ) 保持 了 很 高 的 质量 ,但 文件 大 
小 (224.3K ) 也 大 得 多 。 显 然 , JPEG 是 保存 照片 
的 最 佳 选择 
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Cgimal Opturnizsd 2，4-UP 


NIA Ap 


Tra Mfra Tra, 
Pdacal 

















POQGa 图 714 款 题 人 浏览 器 默认 的 白色 背景 、 黑 色 广 
maw | 字样 式 变 为 黄色 背景 、 红 色 文 字 





| 二 





16 种 基本 颜色 关键 字 


aqua 水绿) ”black ( 黑 ) blue ( 蓝 ) ”fuchsia (紫红) 
#00FFFF #000000 #0000FF #FFOOFF 


lime 〈 浅 绿 ) maroon ( 褐 ) 
#00FFOO #800000 


purple 〈 紫 ) red 〈 红 ) 
#800080 #FF0000 


Podca! Podeca 


Perceprual paleme | 1, 7k 
23cDBIGGKbps -nm 256 colors | | 3 sc DB S660KRbps *u 


图 5.4.5 ”这 个 图 像 (已 被 放大 ) 有 很 多 平 铺 的 颜色 
及 文字 ， 它 们 需要 保持 锐利 。 可 以 看 到 ，PNG-8 格 
式 (左下 ) 对 图 像 的 压缩 是 最 好 的 ， 文 件 大 小 只 有 
5$.3SK。 如 果 减 少 颜色 的 数量 ， 其 大 小 还 将 进一步 减 
小 。PNG-24 可 以 提供 更 多 的 颜色 ， 使 用 这 种 格式 的 
话 ， 文 件 大 小 为 11.17K。 使 用 最 高 质量 的 JPEG 则 
为 19.76K。 如 果 将 JPEG 的 质量 降 为 50 ( 这 里 没有 
显示 ) ,文件 大 小 可 比 PNG-8 更 小 一 点 ,但 其 效果 
看 上 去 却 很 可 怕 

















gray ( 灰 ) 
#808080 


green 〈 绿 ) 
#008000 














navy (深蓝 ) ”olive〈( 橄 槛 ) 
#000080 #808000 


white 〈 白 ) 
#FFFFFF 


yellow〈 黄 ) 
#FFFF00 


teal 〈 深 青 ) 
#008080 


silver 〈 银 ) 
#COCOCO 





7.5.6 ”16 种 基本 颜色 关键 字 ， 以 及 它们 对 应 的 
十 六 进 制 数 字 值 。CSS3 新 增 了 131 个 关键 字 ， 不 
过 通过 十 六 进 制 、RGB 或 HSL 等 格式 可 以 定义 多 
得 多 的 颜色 


Barcelona celebrated 1 


Gaudi's birth in 2002. 、、 
图 9.7.3 新 的 、 未 访 


问 的 链接 显示 为 红色 


图 9.7.6” 当 访问 者 将 
鼠标 指针 停留 在 链接 上 
时 ， 它 显示 为 绿色 


Barcelona 二 I 
4 Gaudi's birth im2002. 
图 9.7.4 访问 过 的 链 
接 变 为 杰 色 





Barcelona celebrated 1 


Gaudi's birth in 2002. 9.7.5 链接 获得 焦 


点 (如 通过 Tab 键 ) 时 
显示 为 紫色 
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Barcelona 和 | 
Gaudi's birth in 2. 


-站 图 -局 
| I 
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图 9.7.7 当 访 问 者 激 
活 链 接 时 ， 它 变 为 蓝 色 


全 生生 


Background image repeat—x 





Background image repeat—x 


horizontally 


White background color fills in space above image. 





10.10.10 ”这 张 背景 图 像 (上 ) 由 黑色 回 蓝 色 再 
向 绿 色 渐 变 ， 很 适合 水 平 重 复 。 不 过 它 的 高 度 不 足 
以 填充 整个 页 面 ， 在 不 设置 背景 色 的 情况 下 显得 很 
难看 。 那 一 行文 字 其 实 并 没有 被 切割 ， 看 不 见 它 的 
上 半 部 分 是 因为 它 的 颜色 与 默认 的 背景 色 一 样 ， 都 
是 白色 
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Background image repeat-X 
品 。 aackdj 口 


Background image repeat-Xx 


Ba 
hol 


Black 


Background repeats 
horizontally 


Black background color fills in space above image. 





10.10.12 黑色 (#000 ) 背景 色 与 图 像 顶 端的 
黑色 完美 地 融合 在 一 起 。 现 在 ， 你 可 以 看 到 那些 文 
本 了 ! 这 张 图 是 由 两 个 浏览 喜 窗 口 截 图 合成 的 ， 这 
两 个 窗口 的 高 度 是 一 样 的 。 如 果 没 有 为 html 元 素 
添加 图 10.10.11 中 的 规则 ， 效 果 就 如 左 图 所 示 ， 青 
景 图 像 的 底部 位 于 文字 下 面 一 点 的 位 置 ( 因为 页 面 
在 那个 位 置 结束 了 ) ， 因 此 黑色 背景 色 会 显示 在 它 
的 下 面 
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Multiple Backgrounds 
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图 14.6.3 ”支持 多 重 背 景 的 浏览 上 帮 显 示 示 例 的 样 
子 。 其 中 ， 图 像 是 分 层次 相互 重合 在 一 起 的 ， 用 去 
号 分 隔 的 列表 中 的 第 一 个 图 像 位 于 顶部 








to to 
bottom right 


bottom left 


to top right to top left 





14.7.4 有 两 种 指定 渐变 方向 角度 的 方式 。 第 一 
种 方式 就 是 这 里 所 示 的 ， 使 用 关键 字 指 定 渐变 方向 
需要 旋转 的 角度 。 渐 变 会 从 跟 指定 角 相 对 的 角 ( 对 
角 线 另 一 端的 角 ) 开始 

















14.7.5 ”使 用 关键 字 (参见 图 14.7.4 ) 只 能 创建 
沿 对 角 线 方 回 的 渐变 。 第 二 种 方式 是 指定 渐变 角度 
的 度数 ， 如 90deg (90 度 ) 。 数 值 代 表 的 是 圆周 上 
的 点 的 位 置 : 0 代表 最 顶端 的 点 ,90 代表 最 左边 的 点 ， 
180 代表 最 底 端的 点 ，270 代表 最 右边 的 点 。 你 列 出 
的 值 决定 的 是 渐变 结束 的 点 的 位 置 。 因 此 ，0deg 等 
价 于 to top，90deg 等 价 于 to right， 以 此 类 推 
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14.7.6 ”包含 额外 的 可 选 参 数 的 径 癌 渐变 。 最 简 
单 的 例子 是 默认 的 样式 规则 ， 它 使 用 的 参数 与 线性 
渐变 是 一 样 的 。 在 这 个 例子 中 ， 渐 变 的 原点 是 元 素 
的 中 心 。 可 以 使 用 at top 这 样 的 关键 字 指 定 中 心 的 
位 置 。 跟 往常 一 样 ， 可 以 在 径 向 渐变 声明 之 前 为 较 
旧 的 浏览 需 提 供 一 个 背景 的 定义 








100PXRS0OPDX 0% 


lo Uo at 
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14.7.7 
个 例子 


还 可 以 控制 渐变 的 尺寸 。 这 里 展示 了 儿 


variGUs 1 





14.7.8 这 些 例子 结合 了 几 个 参数 。 它 们 都 有 三 
个 颜色 ,位 于 at 后 面 的 值 指 定 的 是 渐变 的 中 心 坐标 。 
在 第 二 个 例子 中 ，30px 30px 标记 了 渐变 的 尺寸 。 
在 第 一 个 例子 中 ，closest-side 决定 了 渐变 的 尺寸 ， 
它 告 诉 浏览 姻 从 中 心 (指定 为 at 70px 60px ) 问 包 
含 该 渐变 的 区 域 的 最 近 的 一 边 伸 展 








to top right, 
yellow, 


agreen 7026， 
blue 





14.7.9 ”可 以 使 用 百分数 指定 一 个 以 上 的 颜色 停 
止 位 置 


Opacity default 






14.8.2 这 是 图 14.8.1 中 div 的 默认 样式 。 同 
其 他 元 系 一 样 ， 浏 览 郁 为 其 设置 的 默认 样式 为 
opacity: 1; (不 需要 在 样式 表 中 指定 ) 。 该 div 有 
一 个 黑色 的 背景 ， 由 于 该 元 系 有 内 边 距 ， 因 此 硼 景 
会 显示 出 来 。body 的 背景 为 褐色 











14.8.4 ”这 是 示例 中 div 元 素 的 opacity 设 为 0.5 即 
不 透明 度 为 50% ) 时 的 样子 。 注 意 div 元 素 的 黑色 背 
景 现在 呈现 为 深 宰 色 ， 图像 也 变 成 半 透 明 的 ， 且 带 有 
一 些 褐色 的 色彩 。 如 果 将 某 元 了 的 opacity 设 为 小 于 
1 的 值 ， 包 含 它 的 周边 元 素 就 会 透 出 来 。 在 这 个 例子 
中 ， 透 出 来 的 是 body 的 褐色 背景 。 如 果 将 body 的 背 
景 设 为 红色 ， 效 果 会 更 明显 (参见 图 14.8.5 ) 











14.8.5 “示例 中 div 仍 设 为 opacity: .5;， 但 body 
改 为 background-color: red;。 通 透 的 程度 取决 于 
不 透明 度 。 如 果 将 不 透明 度 设 为 0.35， 就 会 透 出 更 
多 的 红色 ; 如 果 设 为 0.8， 则 透 出 的 红色 就 更 少 
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网 页 的 构造 块 


本 章 内 容 

口 HTML 思想 

口 基本 的 HTML 页 面 

口 标记 : 元 素 、 属 性 、 值 及 其 他 
口 网 页 的 文本 内 容 

口 链接 、 图 像 和 其 他 非 文 本 内 容 
口 文件 名 和 文件 夹 名 

口 URL 

口 HTML: 有 含义 的 标记 

口 浏览 锅 对 网 页 的 默认 显示 歼 果 
口 要 点 回顾 

















尽管 网 页 变 得 越 来 越 复杂 ， 但 是 其 底层 结 
构 依 然 相当 简单 。 正 如 前 言 中 提 到 的 ， 创 建 网 
页 是 离 不 开 HTML 的 。 你 即将 了 解 到 ,HTML 
包含 网 页 内 容 并 说 明 这 些 内 容 的 音义 ，Web 浏 
览 郑 则 会 将 HTML 包 者 的 内 容 呈 现 给 用 户 。 

一 个 网 页 主要 包括 以 下 三 个 部 分 。 

口 文本 内 容 (text content ) : 在 页 面 上 
证 访问 者 了 解 页 面 内 容 的 纯 文 字 ， 比 
如 关于 业务 、 产 品 、 家 庭 度假 的 内 容 ， 
以 及 页 面 关 注 的 其 他 任何 内 容 。 

口 对 其 他 文件 的 引用 (references to other 
files ): 我 们 使 用 这 些 引 用 来 加 载 图 像 、 
音频 、 视 频 文件 ， 以 及 样式 表 (控制 
页 面 的 显示 效果 ) 和 JavaScript 文件 (为 
页 面 添加 行为 ) 。 这 些 引 用 还 可 以 指 




















向 其 他 的 HTML 页 面 和 资源 。 
口 标记 (markup ) : 对 文本 内 容 进 行 描 
述 并 确保 引用 正确 地 工作 。 ( HTML 
一 词 中 的 字母 M 就 代表 标记 。 ) 
此 外 ， 在 每 个 HTML 页 面 的 开头 都 有 
- 些 主要 用 于 浏览 项 和 搜索 引擎 《如 Bing、 
Duck Duck Go 、Google 、Yahoo 等 ) 的 信息 。 
浏览 融 不 会 将 这 些 信 息 呈 现 给 访问 者 。 
需要 注意 的 是 ， 网 页 的 这 些 成 分 都 仅 由 文 
本 构成 。 这 和 意味 肴 网 页 可 以 保存 为 纯 文 本 格式 ， 
可 以 在 任何 平台 (无 论 是 台式 机 、 手 机 、 平 板 
电脑 还 是 其 他 平台 ) 上 用 任何 浏览 善 查看。 这 
个 特性 也 确保 了 很 容易 创建 HIML 页 面 。 
本 章 会 市 你 创建 一 个 基本 的 HITML 页 面 ， 
讲解 HIML 基础 (包括 上 述 三 种 主要 成 分 ) ， 
并 讨论 一 些 最 佳 实践 。 


正如 在 前 言 中 提 到 的 ， 本 书 使 用 
HTML 泛 指 这 门 语 言 本 身 。 如 果 需 要 突出 
HTML 某 一 版 本 独 有 的 特殊 属性 ， 则 使 用 它 
们 各 自 的 名 称 。 例 如 ，“HTML5 引入 了 一 些 
新 的 元 素 ， 并 重新 定义 或 删除 了 HTML 4 和 
XHTML 1.0 中 的 某 些 元 素 。” 





























1.1 HTML 思想 


设想 这 样 一 种 场景 : 你 在 厨房 里 ， 一 只 
手 上 拿 春 便利 贴 ， 上 面 的 每 一 页 都 写 着 一 个 
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大 大 3 


2 第 1 草 网 页 的 构造 块 


单词 。 有 的 贴纸 上 写 的 是 “ 汤 ”, 有 的 写 看 “ 敬 
麦片 ”、“ 和 盘子 ”、“ 桨 计 ” 等 。 

你 打开 一 个 橱柜 ， 为 里 面 的 每 一 样 物 品 
都 贴 上 最 能 描述 它 的 便利 贴 。 一 只 贰 色 的 北 
薰 麦 片 的 盒子 由 上 了 写 有 “燕麦 片 ” 的 贴纸 。 
还 有 一 个 红色 的 盒子 也 是 装 燕 麦片 的 ， 也 为 
它 贴 上 写 有 “燕麦 片 ” 的 贴纸 。 其 他 的 物品 
也 采用 类 似 的 做 法 。 

编写 HTML 与 这 个 过 程 是 很 相似 的 。 不 
同 的 是 ， 编 写 HTML 并 非 加 食物 和 和 餐具 上 由 
标签 ， 而 是 为 网 页 内 容 打 上 能 够 描述 它们 的 
标签 。 你 无 需 自 己 创建 标签 名 称 ，HTML 已 
经 完成 了 这 一 工作 ， 它 有 一 套 预 完 定义 好 的 
元 素 。p 元 素 用 于 上 段落, abbr 元 素 用 于 缩 略 词 ， 
li 元 素 用 于 列表 项 目 。 本 书后 面 会 进一步 介 
绍 这 些 元 素 ， 以 及 很 多 其 他 的 元 素 。 

注意 ， 便 利 贴 上 的 用 词 是 “燕麦 片 ”这 
样 的 ， 而 不 是 “黄色 的 谷物 盒子 ”、“ 红 色 
的 谷物 盒子 ”。 类 似 地 ，HTML 元 素描 述 的 
是 内 容 是 什么 , 而 非 看 起 来 是 什么 样 。CSS( 从 
第 7 曹 开始 讲 解 ) 才 控 制 内 容 的 外 观 ( 如 字 
体 、 颜 色 、 阴 影 等 ) 。 因 此 ,不管 你 最 后 让 
段落 显示 为 绿色 还 是 术 色 ， 它们 都 是 p 元 素 ， 
这 才 是 HTML 唯一 关心 的 。 

在 学 习 本 书 和 创建 网 页 时 ， 应 该 始终 牢 
沁 这 一 思想 。 接 下 来 即将 讲 到 的 基本 网 页 就 









































己 
r 的 


1.2 ”基本 的 HTML 页 面 


来 看 一 个 基本 的 HTML 页 面 ， 大概 了 解 
一 下 本 章 及 后 面 的 内 容 。 我 们 会 对 本 市 中 的 
代码 进行 讲解 。 不 过 ， 即 便 你 现在 不 能 完全 
理解 这 些 代 码 也 不 必 担 心 ， 这 只 是 让 你 初步 
了 解 HTML， 本 书 接 下 来 的 部 分 会 对 其 进行 
详细 说 明 。 当 然 ， 随 看 你 进一步 阅读 本 书 的 
后 续 内 容 ， 还 会 了 解 到 更 多 的 细节 。 此 外 ， 














每 个 人 的 学 习 方 法 都 不 同 ， 或 许 有 的 读者 认 
为 先 阅读 下 一 市 ， 再 返回 来 读 这 一 市 会 更 有 
效 。 

每 个 网 页 都 由 图 1.2.1 中 所 示 的 结构 开 
始 构建 。 这 个 HTML 相当 于 一 张 白 纸 (参见 
图 1.2.2) ， 因 为 访问 者 看 到 的 内 容 位 于 主体 
(body ) 部 分 ( 即 <body> 和 </body> 之 间 的 
部 分 ) ， 而 这 一 部 分 现在 是 空 着 的 。 我 们 马 
上 上 就 会 给 它 填 上 内 容 。 





《!DOCTYPE html> 

<html lang="en"> 

<head> 
<meta charset="utf-8" /> 
<title>Your page title</title> 


</head> 
<body> 


</body> 
</htm]> 





1.2.1 每 个 网 页 都 包含 DO0CTYPE 、htm1L 、head 和 
body 元 素 ， 它 们 是 网 页 的 基础 。 在 这 个 页 面 中 ， 
可 以 定制 的 内 容 包括 两 项 ， 一 是 赋予 lang 属性 的 
语言 代码 ， 二 是 <title> 和 </title> 之 间 的 文字 








Your page title 


Your page tithle 


图 1.2.2 除 
是 一 个 多 么 令 人 激动 的 页 面 

和 完 ， 人 简单 说 明 一 下 (下 一 节 会 详细 人 解 
释 ) ，HTML 使 用 < 和、 包围 HTML 标签 。 


除非 你 是 一 个 极 简 主义 者 ， 否 则 这 不 会 
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开始 标签 (如 《head> ) 用 于 标记 元 又 的 开始 ， 
结束 标签 ( 如 </head> ) 用 于 标记 元 素 的 结 
束 。 有 的 元 素 没 有 结束 标签 ， 如 meta ( 参见 
图 1.2.1 ) 。 


1. 网 页 的 顶部 和 头 部 

前 面 提 到 ， 页 面 内 容 位 于 主体 部 分 ， 那 
么 其 他 的 代码 有 什么 作用 呢 ?” 实 际 上 ，<body> 
开始 标签 以 上 的 内 容 都 是 为 浏览 右 和 搜索 
引擎 准备 的 。《!DOCTYPE html> 部 分 ( 称 为 
DOCTYPE ) 告诉 浏览 帮 这 是 一 个 HTMLS5 页 
面 。DOCTYPE 应 该 始终 位 于 页 面 的 第 一 行 。 

接 下 来 是 html 元 素 ， 它 包 着 页 面 的 其 余 
部 分 ， 即 <html lang="en"> 和 </html> 结 
标签 ( 表示 页 面 的 结尾 ) 之 间 的 内 容 。 在 这 
里 可 以 为 网 页 指定 其 他 语言 ， 这 一 内 容 将 在 
3.1 节 作 详细 说 明 。 

再 接 下 来 是 文档 的 头 部 ， 即 “head> 和 














《!DOCTYPE html> 
<html Jang= en > 
<head> 
<meta charset="utf-8" /> 
<title>Blue Flax (Linum lewisii)</title> 
</head> 
<body> 
<article> 
<h1>The Ephemeral Blue Flax</h1> 


1.2 基本 的 HTML 页 面 3 


</head> 之 间 的 区 域 。<meta charset="utf-8" 
/> 会 在 1.4 市 进行 讲解 。 主 体 前 面 的 代码 
中 ， 有 一 部 分 是 用 户 可 见 的 ， 即 <title> 和 
</title> 之 间 的 文本 。 这 些 文本 会 出 现在 浏 
览 硕 标签 页 中 ， 对 于 某 些 浏览 闹 ， 这 些 文 本 
还 会 出 现在 浏览 器 窗口 的 顶部 ， 作 为 网 页 的 
标题 《如 网 1.2.2 所 示 ) 。 上 此外， 这 些 文 本 通 
稼 还 是 浏览 融 书 签 的 默认 名 称 ， 它 们 对 搜索 
引擎 来 说 也 是 非常 重要 的 信息 。 

3.1 节 和 3.2 节 会 对 DOCTYPE 和 头 部 进 
行 详 细 的 讲解 。 

这 就 是 网 页 的 基础 ， 并 不 太 难 ， 对 吧 ? 


2. 网 页 的 主体 : 你 的 内 容 

接 下 来 为 页 面 添加 一 些 内 容 ( 如 图 1.2.3 
所 示 ) 。 图 1.2.4 显示 了 昌 面 浏览 带 呈 现 这 上 段 
HTML 的 效果 ( 如 果 添 加 CSS， 页 面 看 起 来 


会 更 漂 完 ) 。 




















<img src="blueflax.jpg” width="300" height="175" alt="Blue Flax” /> 


<p>I am continually <em>amazed</em> at the beautiful, delicate <a href="http://en.wikipedia. 
org/wiki/Linum lewisii" rel="external" title="Learn more about Blue Flax">Blue Flax</a> 
that somehow took hold in my garden. They are awash in color every morning, yet not a single 
flower remains by the afternoon. They are the very definition of ephemeral.</p> 


</article> 
</body> 
</html> 


1.2.3 ”这 个 页 面包 含 了 本 章 开 头 提 到 的 三 种 成 分 : 





文本 内 容 、 对 其 他 文件 的 引用 ( 图 像 的 src 值 和 链 











接 的 href 值 ) 及 标记 。 我 突出 显示 了 主体 部 分 的 标记 , 读者 可 以 很 方便 的 区 分 标记 和 页 面 的 文本 内 容 。 同 时 ， 
请 注意 ， 行 与 行 之 间 通过 回 车 符 分 开 了 ， 这 并 不 是 必需 的 ， 不 影响 页 面 的 呈现 效果 
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Iam continually amazed at the beautiful, delicate Blue Flax 由 at 
somehow took hold in my garden. They are awash in color every 
morning, yet not a single flower remains by the afternoon. They are 


the very definition of ephemeral. 





图 1.2.4 页 面 典 型 的 默认 呈现 效果 。 这 是 页 面 在 
Firefox 中 显示 的 效果 ， 在 其 他 浏览 右 中 的 效果 也 


是 相似 的 。1.9 节 解 释 了 不 同文 本 看 起 来 不 一 样 的 
原因 
前 面 提 到 过 (参见 图 1.2.2 ) ,使 用 浏览 








俯 查 看 网 页 时 ， 不 会 显示 包围 文本 内 容 的 标 
记 。 不 过 这 些 标记 是 非常 有 用 的 ， 我 们 就 是 











使 用 它们 来 描述 内 容 的 。 例 如 ， ea 
表示 段落 的 开始 ， 具 体 的 解释 参见 1.8 节 。 


对 HTML 进行 缩 进 


代码 的 缩 进 (参见 图 1.2.3 ) 与 内 容 在 
浏览 器 中 的 显示 效果 O44 
信人 人 
例外 ) 。 不 过 ， 对 训 套 在 父 元素 中 的 代码 
进行 缩 进 是 一 种 惯例 ， 这 样 我 们 在 编写 和 
阅读 代码 时 就 会 更 容 萝 看 出 元 素 之 间 的 层 
级 关系 。 


HTML 提供 了 很 多 这 样 的 元 系 。 图 1.2.3 
所 示 的 例子 演示 了 六 种 最 为 常见 的 元 素 : a 
article、em、h1、img 和 jp。 每 个 元 素 都 有 各 
目的 含义 ， 例 如 ，had 是 标题 ，a 是 链接 ，img 
是 图 像 。 

我 们 暂时 不 会 对 示例 代码 做 过 多 的 探讨 。 
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在 此 之 前 , 要 进一步 介绍 HTML 的 基础 知识 ， 
如 通常 意义 上 的 元 素 、 属 性 、 文 件 名 、URL 等 。 
介绍 完 这 些 ， 和 再 回 过 头 来 解释 为 什么 要 以 这 

样 的 方式 标记 这 些 内 容 。 我 们 还 会 介绍 浏览 
如 在 默认 情况 下 如 何 显 示 这 些 网 页 。 


1.3 ” 标 念 : 元 素 、 属 性 、 值 及 其 他 


见识 了 一 些 HTML 之 后 ， 我 们 来 仔细 看 看 
标签 的 组 成 : 元 素 (element ) 、 属 性 (attribute ) 
和 值 (value ) 。 我 们 还 将 讨论 父 元 系 和 子 元 
系 的 概念 。 你 在 上 文 的 基本 HTML 页 面 中 已 

经 见 到 了 上 面 这 些 概念 的 例子 ， 不 过 你 可 能 
并 没有 意识 到 。 


1. 元 素 

我 们 在 便利 贴 的 例子 中 讲 到 ， 元 素 就 像 
描述 网 页 不 同 部 分 的 小 标签 一 样 : 这 是 一 个 
标题 ， 那 是 一 个 段落 ， 而 那 一 组 链接 是 一 个 
导航 。 我 们 在 前 面 已 经 讨论 过 一 些 元 素 ， 有 
的 元 双 有 一 个 或 多 个 属性 ， 属 性 用 来 进一步 
描述 元 素 。 

大 多 数 元 素 既 包含 文本 ， 也 包含 其 他 元 
素 (就 像 基 本 页 面 中 的 p 元 素 ) 。 如 前 面 提 
到 的 ， 这 些 元 素 由 开始 标签 、 内 容 和 结束 标 
签 组 成 。 开 始 标 签 是 放 在 一 对 兴 括 号 中 的 元 
系 的 名 称 及 可 能 包含 的 属性 ， 结 束 标 签 是 放 
在 一 对 尖 括 号 中 的 和 斜 杠 加 元 素 的 名 称 (人 参见 
图 1.3.1) 。 
































内 容 
开始 标签 | 结束 标签 
ee a 


am continually Seme nous em> 
斜 杠 
图 1.3.1 这 是 一 个 典型 的 HTML 元 素 。 开 始 标签 


和 结束 标签 包 着 描述 元 素 的 文字 。 习 惯 上 ， 标签 采 
用 小 写字 母 
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还 有 一 些 元 素 是 空 元 素 (empty element 
或 void element ) ， 既 不 包含 文本 也 不 包含 其 
他 元 闵 。 它 们 看 起 来 像 是 开始 标签 和 结束 标 
签 的 结合 ， 由 左 尖 插 号 开头， 然后 是 元 系 的 








1.3 标签 : 元素、 属性 、 值 及 其 他 5 
名 称 和 可 能 包含 的 属性 ， 然 后 是 一 个 可 选 的 
空格 和 一 个 可 选 的 斜 杜 ， 最 后 是 必 有 的 右 尖 
括号 (参见 网 1.3.2 ) 。 











<img src="blueflax.jpg" width= 300” height= 175”ajt= Blue Flax” /> 


可 选 的 空格 和 斜 杠 








图 1.3.2 ” 空 元 系 (如 这 里 显示 的 img 元 素 ) 并 不 包含 任何 文本 内 容 (alt 属性 中 的 文字 是 元 素 的 一 部 分 ， 
并 非 显 示 在 网 页 中 的 内 容 ) 。 空 元 素 只 有 一 个 标签 ， 同 时 作为 元 素 的 开始 标签 和 结束 标签 使 用 。 结 尾 处 的 




















空格 和 和 斜 杠 在 HTMLS 中 是 可 选 的。 不 过 ， 元 系 最 后 面 的 > 是 必需 的 


在 HTML5 中 ， 空 元 素 结尾 处 的 空格 和 和 斜 
杠 是 可 选 的 。XHTML 要 求 空 元 素 结尾 处 必须 
有 和 斜 杜 。 以 前 用 XHTML 的 人 阜 怕 仍然 倾向 
于 在 HTMLS 中 继续 使 用 斜 杜 ， 而 其 他 人 可 能 
已 经 不 用 了 。 不 管 选择 哪 种 方式 ， 建 议 始终 
保持 一 致 。 

按照 惯例 ， 元 素 的 名 称 都 用 小 写字 母 。 
不 过 ，HTMLS5 对 此 未 做 要 求 ， 也 可 以 使 用 大 
写字 母 。 只 是 现在 已 经 很 少 有 人 用 大 写字 母 














for 是 label 的 一 个 属性 


略 克 
《Label for="email">Email Address</l1abel> 


for 属性 的 值 





编写 代码 了 ， 因 此 ， 除 非 无 法 抗拒 ， 人 否则 不 
推 存 使 用 大 写字 母 ， 这 是 一 种 过 时 的 做 法 。 


2. 属性 和 值 

属性 包含 了 元 素 的 额外 信息 (参见 图 1.3.3 
和 图 1.3.4) 。 在 HTMLS5 中 ， 属 性 值 两 边 的 
引号 是 可 选 的 ， 但 习惯 上 大 家 还 是 会 写 上 ， 
因此 建议 始终 这 样 做 。 跟 元 素 的 名 称 一 样 ， 
尽量 使 用 小 写字 母 编 写 属 性 的 名 称 。 

















1.3.3 ”这 是 一 个 label 元 素 〈 关 联 文本 标签 与 表单 字段 ) ， 它 有 一 个 简单 的 属性 - 值 对 。 属 性 总 是 位 于 





元 素 的 开始 标签 内 ， 属 性 的 值 通 常 放 在 一 对 括号 中 


href 是 a 的 一 个 属性 
href 的 值 


rel 也 是 a 的 一 个 属性 
rel 的 值 


<a href="http://en.wikipedia.org/wiki/Linum lewisii" rel="external" 


title="Learn more about Blue Flax">Blue Flax</a> 


title 的 值 
title 也 是 a 的 属性 











1.3.4 ”有 的 元 厅 ( 比如 图 1.3.2 中 的 a 和 img ) 可 以 有 多 个 属性 ， 每 个 属性 都 有 各 目的 值 。 属 性 的 顺序 





并 不 重要 。 不 同 的 属性 - 值 对 之 间 都 用 空格 隔 开 
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本 书 会 对 大 多 数 属 性 可 接受 的 值 进行 详 
细 说 明 , 不 过 不 妨 先 看 看 各 有 哪些 类 型 的 值 。 
有 的 属性 可 以 接受 任何 值 ， 有 的 则 有 限 
制 。 最 常见 的 还 是 那些 仅 接 受 预 定义 值 (也 








称 为 枚 举 值 ) 的 属性 。 也 就 是 说 ， 必 须 从 一 


个 标准 列表 中 选 一 个 值 (参见 图 1.3.5 ) 。 一 











定 要 用 小 写字 母 编 写 枚 举 值 。 


<link rel="stylesheet" media="screen™” href="style.css" /> 


预定 义 值 


非 预 定义 值 





1.3.5 有 的 属性 只 接受 特定 的 值 。 例 如 ， 只 能 将 link 元 素 里 的 media 属性 设 为 all、screen、print 等 
值 中 的 一 个 (参见 第 8 章 ) ， 不 能 像 href 属性 和 title 属性 那样 可 以 输入 任意 值 








有 许多 属性 的 值 需要 设置 为 数字 ， 特 别 
是 那些 描述 大 小 和 长 度 的 属性 。 数 字 值 无 需 
包含 单位 ， 只 需 输入 数字 本 号 。 图 像 (参见 

















图 1.3.2 ) 和 视频 的 宽度 和 高 度 是 有 单位 的 ， 
默认 为 像素 。 








有 的 属性 (如 href 和 src) 用 于 引用 其 
他 文件 ， 它 们 只 能 包含 URL ( 统一 资源 定位 
符 ， 是 万 维 网 上 文件 的 唯一 地 址 ) 形式 的 值 。 





本 章 后 面 会 详细 介绍 URL。 

最 后 ， 还 有 一 种 特殊 的 属性 称 为 布尔 属 
性 ( Boolean attribute ) 。 这 种 属性 的 值 是 可 
选 的 ， 因 为 只 要 这 种 属性 出 现 就 表示 其 值 为 
真 ( 图 1.3.6) 。 如 果 一 定 要 包含 一 个 值 ， 就 
写 上 属性 名 本 吴 〈 这 样 做 的 效果 是 一 样 的 ) 。 
布尔 属性 也 是 预 完 定义 好 的 ， 无 法 日 创 (你 
应 该 没 那么 叛逆 吧 ) 。 

















<input type= emalil name= emaliladdr required /> 
| 


布尔 属 ， 





图 1.3.6 这 段 代 码 提 供 了 一 个 让 用 户 输 入 电子 邮件 地 址 的 输入 框 (参见 第 18 章 ) 。 布 尔 属性 required 代 
表 用 户 必 须 填 写 该 输入 框 。 布 尔 属性 不 需要 属性 值 ， 如 果 一 定 要 加 上 属性 值 ， 则 写作 required="required" 











3. 父 元 素 和 子 元 素 

如 采 一 小 见 系 个 合 为 一 个 元 系 。， 人 尼 砚 是 
被 包含 元 系 的 父 元 素 ， 被 包含 元 系 称 为 子 元 
系 。 子 元 素 中 包含 的 任何 元 素 都 是 外 层 的 父 
元 素 的 后 代 (参见 图 1.3.7 ) 。 这 种 类 似 家 谱 
的 结构 是 HTML 代码 的 关键 特性 ， 它 有 助 于 
在 元 系 上 添加 样式 ( 从 第 7 革 开 始 讨 论 ) 和 
应 用 JavaScript 行为 《不 在 本 书 介 绍 犯 围 ) 。 














值得 注意 的 是 ， 当 元 素 中 包含 其 他 元 
素 时 ， 每 个 元 素 都 必须 肯 套 正确 ， 也 就 是 
子 元 素 必 须 完 全 地 包含 在 父 元 素 中 。 使 用 
结束 标签 时 ， 前 面 必 须 有 跟 它 成 对 的 开始 标 
签 。 换 句 话 说， 先 开 始 元 素 1， 青 开始 元 系 
2， 就 要 先 结束 元 素 2， 再 结束 元 素 1 ( 参见 
图 1.3.8 ) 。 
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<article> 
<h1>The Ephemeral Blue Flax</h1> 


<img src="blueflax.jpg'... /> 
<p>... continually <em>amazed</em> 
</article> 


... delicate 《<a 
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...>Blue Flax</a> ...</p> 





1.3.7 在 这 段 HTML 代码 中 ，article 元 素 是 hi1、img 和 op 元素 的 父 元 素 。 反 过 来 ，h1、img 和 op 元素 
是 article 元 素 的 子 元 素 ( 也 是 后 代 ) 。p 元 素 是 em 和 a 元 素 的 父 元 素 。em 和 a 元 素 是 p 元 素 的 子 元 素 ， 
也 是 article 元 又 的 后 代 (但 不 是 子 元 系 ) 。 反 过 来 ，article 元 素 是 它们 的 祖先 








正确 (代表 标签 对 的 线 没 有 重 过 ) 


| 
<p>... continually <em>amazed</em> 


<p>... continually <em>amazed ...</p></em> 
| | 


错误 (代表 标签 对 的 线 交 又 了 ) 


...</p> 











1.3.8 元 素 必 须 正确 地 租 套 。 如 条 和 匈 开 始 p， 再 开始 em， 就 必须 先 结束 em， 青 结束 p 


1.4 网 页 的 文本 内 容 


元 素 中 包含 的 文本 可 能 是 网 页 上 最 基本 
的 成 分 。 如 采 你 用 过 文字 处 理 软件 ， 那 么 你 
一 定 输入 过 文本 。 不 过 ，HTML 页 面 中 的 文 
本 有 一 些 重 要 的 差异 。 

首先 ， 浏 览 器 呈现 HTML 时 ,会 把 文本 
中 的 多 个 空格 或 制 表 符 压 缩 成 单个 空格 ， 把 
回 车 符 和 换行 符 转 换 成 单个 空格 ， 或 者 将 它 
们 一 起 忽略 (参见 图 1.4.1 和 图 1.4.2 ) 。 

其 次 , HTML 过 去 只 能 使 用 ASCI 字符 。 
ASCII 只 包括 喘 语 字母 、 数 字 和 少数 几 个 常用 
的 符号 。 开 发 人 员 必 须 用 特殊 的 字符 引用 来 
创建 重 首 字符 ( 在 很 多 西欧 语言 中 很 常见 ) 
和 许多 日 常 符号 ， 如 &eacute; (表示 E) 、 
&copy; (表示 @) 等 。 完 整 列表 见 www. 
ellzabethcastro.comy/htmjl/extras/entities.html。 





























<body> 

<p2I am continually <em>amazed</em> at 
the beautiful, delicate Blue Flax 
that somehow took hold in my garden. 


They are awash in color every 
morning, yet not a single flower 
remains by the afternoon. 


They are the very definition of 
ephemeral.</p> 

<p><small>&copy; Blue Flax Society.</small> 
</p> 

</body> 

</html> 


1.4.1 页 面 的 文本 内 容 ( 粗 体 部 分 ) 几乎 就 是 
标签 以 外 的 所 有 东西 。 在 这 个 例子 中 ， 注 意 每 个 句 
子 都 至 少 包含 一 个 回 车 符 ， 有 的 词 之 间隔 了 好 几 个 
空格 (在 此 只 是 为 了 说 明 HTML 如 何 处 理 回 车 符 
和 空格 ) 。 另 外 ， 第 二 段 还 包含 一 个 表示 版 权 符号 
的 特殊 字符 引用 ( &copy; ) 
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SAA Blue Flax (Linum lewlsid 
Blue Flax (Linum lewisil) 





Iam continually amazed at the beautiful, delicate Blue Flax that somehow took 
hold in my garden. They are awash in color every morning, yet not a single 
flower remains by the afternoon. They are the very definition of ephemeral. 


© Blue Flax Society. 


图 1.4.2 ” 注意， 使 用 浏览 硕 查 看 这 份 文 档 时 ， 多 
余 的 回 车 和 空格 都 被 忽略 了 ， 字 符 引 用 也 替换 成 了 
对 应 的 符号 (©) 

Unicode 极 大 缓解 了 特殊 字符 问题 。 用 
UTF-8 对 页 面 进行 编码 (参见 图 1.4.3 ) ， 并 
用 同样 的 编码 保存 HTML 文件 (参见 2.3 节 ) 
已 成 为 一 种 标准 做 法 。 推 荐 你 也 这 样 做 。 在 
图 1.4.3 中 将 charset 值 指定 为 UTF-8 和 utf-8 
的 结果 是 一 样 的 。 











<!DOCTYPE html> 
<htm] lang="en'"> 
<head> 
<meta charset= utf-8” /> 
<title>Blue Flax (Linum lewisii)</title> 
</head> 
<body> 


</body> 
</html> 





1.4.3 直接 在 head 开始 标签 后 面 指明 文档 的 字 
符 编 码 。charset 属性 用 来 设置 编码 类 型 ( 通常 为 
UTEF-8 ) 

有 了 时 还 是 会 使 用 字符 引 用 ， 如 版 权 符 
号 ( 因为 &copy; 既 好 记 又 好 输入 ) ， 参 见 
图 1.4.1。 


1.5 ”链接 、 图 像 和 其 他 非 文本 内 容 


显然 ,， 万维网 充满 生机 的 部 分 原因 是 
页 面 之 间 的 链接 ， 以 及 图 像 视频、 首 乐 
等 。 外 部 文件 ( 如 图 像 ) 实际 上 并 没有 放 在 

















HTML 文件 中 ， 而 是 单独 保存 的 ， 页 面 只 是 
简单 地 引用 了 这 些 文件 (参见 图 1.5.1 ) 。 


<body> 
<article> 
<h1>The Ephemeral Blue Flax</h1> 


<img src="blueflax.jpg”" width="300" 
height= 175” alt="Blue Flax”" /> 


<p>I am continually <em>amazed</em> at 

the beautiful, delicate <a href= 
"http://en.wikipedia.org/wiki/Linum_ 
lewisii" rel="external" title= 
"Learn more about the Blue Flax"> 
Blue Flax</a> that somehow took 
hold in my garden. They are awash 
in color every morning, yet not a 
single flower remains by the 
afternoon. They are the very 
definition of ephemeral.</p> 

</article> 

</body> 

</html> 





图 1.5.1 在 我 们 的 基本 HTML 文档 中 ， 有 一 个 对 
图 像 文 件 blueflax.jpg 的 引用 (位 于 img 标签 的 src 
属性 ) ， 浏 览 喜 在 加 载 页 面 其 他 部 分 的 同时 ， 会 请 
求 、 加 载 和 显示 这 个 图 像 。 该 页 还 包括 一 个 指 回 关 
于 Blue Flax 的 维基 百科 页 面 的 链接 ( 位 于 a 标签 
的 href 属性 ) 


浏览 各 可 以 轻而易举 地 处 理 链接 和 图 像 
(参见 图 1.5.2 ) 。 然 而 ， 它 们 无 法 处 理 其 他 
任何 文件 类 型 。 例 如 ， 对 有 的 浏览 器 来 说 ， 
要 查看 PDF 就 需要 在 系统 中 预 匈 闻 好 Adobe 
Reader， 要 查看 电子 表格 就 需要 预先 装 好 
OpenOffice 这 样 的 软件 。 

过 去 ，HTML 没有 内 置 的 方法 播放 视频 和 
音频 文件 。 绪 采 ， 各 个 三 商都 开发 出 了 相应 的 
软件 ， 用 户 可 以 下 载 并 安装 这 些 软件 ， 从 而 弥 
补缺 失 的 功能 。 这样 的 软件 称 为 插件 (plugin ) 。 
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Blue Flax (Linum lewisiiy 


Blue Flax (Linum lewisii) 





Iam continually amazed at the beautiful, delicate Blue Flax that 
somehow took hold in my garden. They are awash in color every 
morning, yet not a single flower remains by the afternoon. They are 
the very definition of ephemeral. 





1.5.2 从 网 页 引用 图 像 和 其 他 非 文 本 内 容 ， 浏 
览 需 会 将 这 些 内 容 与 文本 一 起 显示 。 你 在 前 面 已 经 
看 到 过 了 ， 默 认 情 况 下 ， 链 接 文本 的 颜色 与 其 他 文 
本 的 颜色 是 不 一 样 的 ， 而 且 还 带 有 下 划 线 

在 这 些 插 件 中 ， 使 用 最 为 广泛 的 当 数 
Flash。 多 年 以 来 ，Flash 驱动 了 无 数 万 维 网 上 
的 视频 。 不 过 ， 这 个 插件 也 有 一 些 问 题 ， 其 
中 最 为 突出 的 就 是 它 会 耗费 较 多 的 计算 资源 。 








文件 名 ， 全 部 
用 小 写字 母 扩展 名 


一 
es 


单词 之 间 使 用 短 横 线 分 隔 





1.6.1 
母 会 增加 访问 者 输入 正确 地 址 以 及 找到 页 面 的 难度 


正确 的 写法 
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幸好 ，HTMLS 已 经 为 缓解 这 一 问题 迈 出 
了 一 大 步 。HTMLS 提 供 了 audio 和 video 元 素 ， 
这 样 , 无 需 使 用 插件 就 可 以 播放 音频 和 视频 。 
不 过 ， 现 代 浏 览 胡 也 提供 了 内 置 的 媒体 播放 
器 ， 你 仍然 可 以 使 用 Flash 播放 器 作为 旧 浏 览 
器 的 备用 工具 。HTMLS 的 音频 和 视频 还 不 完 
美 , 但 至 少 开 始 癌 者 无 插件 的 目标 前 进 了 ， 
而 且 还 在 继续 前 进 。 

本 书 将 在 第 5 曹 讨论 图 像 ， 在 第 6 章 讨 
论 链接 ,在 第 17 章 讨论 HIMLS 的 音频 和 视频 。 


1.6 文件 名 和 文件 夹 名 


同 其 他 文本 文件 一 样 ， 网 页 也 有 文件 名 。 
对 网 页 文件 命名 时 要 记 住 几 点 ， 这 些 要 点 有 助 
于 对 文件 进行 组 织 ， 使 访问 者 更 容易 找到 并 访 
问 你 的 页 面 ， 确 保 他 们 的 浏览 器 能 正确 地 处 理 
页 面 ， 以 及 增强 搜索 引擎 优化 (SEO ) ， 参见 
图 1.6.1 和 图 1.6.2。( 注意 , 本 书 会 蔡 换 使 用 ” 文 
件 夹 ”和 “目录 ， 它 们 表示 的 含义 相同 。) 














首 字 母 大 写 的 文件 名 
不 方便 输入 和 交流 


= 上 
Buckminster Fuller.html 


| 
下 划 线 对 搜索 引擎 优化 的 
支持 程度 不 如 短 横 线 








记 住 ， 文 件 名 全 部 使 用 小 写字 母 ， 用 短 横 线 分 隔 单词 ， 用 .html 作为 扩展 名 。 混 合 使 用 大 小 写字 


上 
http://www.yoursite.com/notable-architects/20th-century/buckminster-fuller.html 


http://www.yoursite.com/NotableArchitects/20th CENTURY/buckminster fuller.html 


错误 的 写法 














图 1.6.2 ”文件 夹 的 名 称 也 应 全 部 用 小 写字 母 。 关 键 是 保持 一 致 。 如 果 使 用 小 写字 母 ， 访 问 者 和 创建 者 就 








不 必 在 大 与 字母 和 小 写字 母 之 间 转 换 浪费 时 间 了 
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1. 文件 名 采用 小 写字 母 

网 页 的 文件 名 决定 了 访问 者 在 访问 你 的 
页 面 时 需要 输入 的 文本 ， 因 此 ， 文 件 名 和 文 
件 夹 名 只 用 小 写字 母 可 以 最 大 程度 地 避免 访 
问 者 的 输入 错误 。 这 样 做 对 创建 页 面 之 间 的 
链接 也 有 很 大 的 帮助 。 如 果 所 有 的 文件 名 都 
用 小 写字 母 , 你 就 少 了 一 件 需 要 操心 的 事情 。 


2. 使 用 正确 的 扩展 名 

浏览 天 主要 通过 碍 看 文件 的 扩展 名 得 知 
需要 该 取 的 文本 文档 是 一 个 网 页 。 尽 管 也 可 
以 使 用 .htm 作为 网 页 的 扩展 名 ,但 通常 使 用 
的 是 .html。 如 末 页 面 使 用 其 他 的 扩展 名 ( 如 
-txt ) ， 训 览 郁 会 将 其 当做 文本 处 理 ， 相 当 于 
将 你 的 代码 直接 呈现 给 访问 者 。 


3. 用 短 横 线 分 隔 单 词 

不 要 在 文件 名 和 文件 夹 名 中 使 用 空格 分 
隔 单词 。 应 该 使 用 得 横 线 ， 例 如 company- 
history.html 和 my-favorite-movies.html。 有 的 
网 站 使 用 下 划 线 (_) ,我 们 不 推荐 这 种 做 法 ， 
因为 短 模 线 是 搜索 引 敬 更 容易 接受 的 方式 。 


人 一 SEO 可 以 让 网 页 在 搜索 引擎 的 搜索 结 
果 中 排名 靠 前 。 
































Mac OS 和 Windows 有 时 不 会 显示 文 
档 的 扩展 名 。 如 需 查 看 扩展 名 ， 请 更 改 文件 
夹 选项 。 


1.7 URL 


URL ( Uniform Resource Locator， 统 一 资 
源 定位 符 ) 是 地 址 的 别名 。 它 包含 关于 文件 
存储 位 置 和 浏览 絮 应 如 何 处 理 它 的 信息 。 互 
联网 上 的 每 个 文件 都 有 唯一 的 URL。 

URL 的 第 一 个 部 分 称 为 模式 (scheme ) 。 


模式 告诉 浏览 硕 如 何 处 理 需 要 打开 的 文件 。 
最 常见 的 模式 是 HITP (Hypertext Transfer 
Protocol， 超 文本 传输 协议 ) 。 根 据 你 上 网 的 经 
验 ， 你 应 该 可 以 猜 到 ，HTTP 是 用 于 访问 网 页 
的 (参见 图 1.7.1) 。HTTPS 是 从 HTTP 衍生 
来 的 ， 用 于 电子 商务 网 站 等 安全 网 页 。 它 的 格 
式 同 HTTP 一 样 ， 只 是 用 https 奉 代 了 http。 


模式 主机 名 路 径 


一 一 

"http://www.site.com/tofu/index.html" 
本 
目录 文件 名 





图 1.7.1 基本 的 URL 包含 模式 、 主 机 名 称 和 路 径 。 
路 径 包 含 一 个 或 多 个 目录 (文件 夹 ) ， 最 后 是 一 个 
文件 名 

URL 的 第 二 个 部 分 是 文件 所 在 的 主机 的 
名 称 ， 紧 接着 是 路 径 ， 路 径 包 含 到 达 这 个 文 
件 的 文件 夹 以 及 文件 目 身 的 名 称 〈 这 些 都 是 
可 选 的 ) 。 如 果 A 中 的 路 径 是 tofu/soft/index. 
html， 就 表示 index.html 位 于 soft 目录 ， 而 
soft 目录 则 位 于 tofu 目录 ， 就 像 你 在 自己 的 电 
脑 上 组 织 文 件 和 文件 夹 那样 。 

有 时 ，URL 路 径 不 以 文件 名 结尾 ， 而 以 
一 个 目录 结尾 ( 可 以 包含 一 个 结尾 的 斜 杠 ， 
也 可 以 不 包含 ) ， 如 图 1.7.2 所 示 。 在 这 种 情 
况 下 ，URL 指 的 是 路 径 中 最 后 一 个 目录 中 的 
默认 文件 , 通常 为 index.html。( 通 常情 况 下 ， 
所 有 Web 服务 器 的 配置 都 将 index.html 作为 默 
认 文 件 名 , 因此 你 不 必修 改 任何 服务 需 配 置 。) 








Bi 





"http://www.site.com/tofu/" 


图 1.7.2 ”以 一 个 和 斜 杠 而 非 文 件 名 结尾 的 URL 指 问 最 
后 一 个 目录 (在 这 个 例子 中 是 tofu 目录 ) 中 的 默认 文 
件 。 最 常见 的 默认 文件 名 是 index.html。 因 此 ， 这 个 
URL 与 上 一 个 例子 中 的 URL 指向 的 是 同一 个 页 面 
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其 他 常见 的 模式 有 用 于 下 载 文件 的 ftp 
( File Transfer Protocol， 文 件 传输 协议 ) ， 如 
图 1.7.3 所 示 ; 用 于 发 送 电 子 邮 件 的 mailto， 
如 图 1.7.4 所 示 (参见 第 6 半 )。 


模式 主机 名 路 和 
-0 


ES 

ftp:Wftp.Site.Com/pub/yproposal.pdf- 
一 站 EE 
目录 文件 名 





1.7.3” 当 用 户 点 击 这 个 URL 时 ， 浏 览 器 会 开始 
按 FTP 模式 传输 文件 proposal.pdf ( 有 时 需要 先 输 
入 用 户 名 和 和 密码 ) 


模式 电子 邮箱 地 址 
一 


"mailto:somename@somedomain.com" 





1.7.4 用 于 电子 邮件 地 址 的 URL 包括 mailto 模 
式 ， 紧 接着 是 一 个 冒号 〈 没 有 斜 杠 ) ， 然 后 是 电子 
邮箱 地 址 本 身 

模式 后 面 通常 紧 跟 一 个 冒号 和 两 个 和 斜 杜 。 
mailto 是 个 例外 ， 它 后 面 只 有 一 个 冒号 。 

在 上 述 模 式 中 ,最 第 用 到 的 是 http( 也 包 
括 https ) ， 其 次 是 mailto， 再 次 是 fp。 其 他 
模式 则 只 有 在 特殊 情况 下 才 会 用 到 ， 你 很 少 
会 碰 到 它们 。 








1. 绝对 URL 

URL 可 以 是 绝对 的 ， 也 可 以 是 相对 的 。 
绝对 URL (absolute URL ) 包含 了 指 回 目录 或 
文件 的 完整 信息 ， 包 括 模式 、 主 机 名 和 路 径 
(图 1.7.1 和 图 1.7.2 ) 。 绝 对 URL 就 像 是 完 
整 的 通信 地 址 ， 包 括 国家 、 州 、 城 市 、 邮 政 
编码 、 和 街道 和 姓名 。 无 论 邮 件 来 自 哪 里 ， 邮 
局 都 能 找到 收 件 人 。 就 URL 来 说 ， 这 意味 着 
绝对 URL 本 身 与 被 引用 文件 的 实际 位 置 无 关 ， 
无 论 是 在 哪个 主机 上 的 网 页 中 ， 某 一 文件 的 
绝对 URL 都 是 完全 一 样 的 。 
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引用 别人 Web 服务 器 上 的 文件 时 ， 应 该 
总 是 使 用 绝对 URL。 当 你 通过 电子 邮件 跟 你 
的 朋友 分 享 新 闻 或 YouTube 视频 的 URL 时 ， 
如 果 只 给 他 们 URL 的 一 部 分 ， 他 们 就 无 法 看 
到 相应 的 内 容 。 这 也 就 是 为 什么 我 们 的 基本 
页 面 (参见 图 1.7.5 ) 中 指向 维基 百科 页 面 的 
href 值 是 完整 的 URL 而 不 是 简单 的 Linum_ 


]ewlsll 。 





<p>I am continually 《em>amazed</em> at 
the beautiful, delicate «a href="http:// 
en.wikipedia.org/wiki/Linum lewisii" 


rel="external" title="Learn more about the 
Blue Flax">Blue Flax</a> that somehow took 
hold in my garden . . .</p> 








1.7.5 ”由 于 我 们 的 基本 页 面 并 不 在 en.wikipedia. 
org， 因 此 在 链接 到 关于 Blue Flax (拉丁 文中 为 
Linum lewisii ) 的 页 面 时 ， 需 要 使 用 绝对 URL。 
第 6 章 对 链接 作 了 详尽 的 介绍 ， 包 括 rel 属性 (如 
果 链 接 是 指向 其 他 网 站 的 ， 推 荐 使 用 这 一 属性 ) 

对 于 FTP 站 点 以 及 几乎 所 有 不 使 用 HTTP 
协议 的 URL， 都 应 该 使 用 绝对 URL。 


2. 相对 URL 

当 我 告诉 你 我 邻居 家 的 位 置 时 ， 我 一 般 
不 会 说 完整 地 址 ， 而 是 说 : “她 家 在 右边 第 三 
个 门 。” 这 就 是 相对 地 址 ， 它 指出 的 位 置 是 
以 信息 提供 者 的 位 置 为 参照 的 。 如 果 在 别 的 
城市 按照 同样 的 信息 找 我 的 邻居 ， 你 永远 也 
找 不 到 。( 实际 情况 是 ， 她 出 门 很 长 一 段 时 
间 了 ， 因 此 慌 介 你 还 是 找 不 到 她 。 ) 

同样 ， 相 对 URL 以 包含 URL 本 身 的 文 
件 的 位 置 为 参照 点 ， 描 述 目标 文件 的 位 置 。 
因此 ， 相 对 URL 可 以 表达 像 “ 指 向 本 页 面 同 
一 目录 下 的 xyz 页 面 ”这 样 的 意思 。 


9 引用 同一 目录 下 的 文件 


如 采 目 标 文件 与 当前 页 面 ( 也 就 是 包含 
URL 的 页 面 ) 在 同一 个 目录 中 ， 那 么 这 个 文 
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件 的 相对 URL 就 只 有 文件 名 和 扩展 名 (参见 
图 1.7.6) 。 例 如 ， 链 接 的 HTML 可 能 是 《a 
href="history.html">Take me to history. 
html!</a>。 


在 当前 文件 夹 中 ， 有 一 个 名 为 
history.html 的 文件 
一 一 





"history.html" 





1.7.6 相对 URL 指 问 同一 目录 下 的 文件 (参见 
图 1.7.10 ) 。URL 中 只 需要 文件 名 和 扩展 名 ， 不 必 
在 前 面 加 上 http://wwwi.site.com/about/( 这 两 个 文 
件 所 在 的 主机 名 和 目录 ) 





@ 引用 子 目录 下 的 文件 

如 采 目 标 文 件 在 当前 目录 的 子 目 录 中 ， 
那么 这 个 文件 的 相对 URL 就 是 子 目 录 名 ， 接 
着 是 一 个 斜 枉 ， 然 后 是 文件 名 和 扩展 名 《〈 参 
见 图 1.7.7)。 例如 ,xa href="info/data. 
htm] >Data supports my hypothesis</ay>。 











在 当前 文件 中 ， 有 一 个 
名 为 info 的 文件 夹 …… 


cl 
"info/data.html" 
TT 


…… 一 个 名 为 data.html 的 文件 








1.7.7 要 引用 当前 文件 夹 的 子 文件 夹 中 的 文件 ， 
在 这 个 例子 中 是 data.html ( 参见 图 1.7.10 ) ， 应 在 
文件 名 之 前 加 上 子 文件 夹 名 称 和 一 个 和 斜 杠 


@ 引用 上 层 目 录 的 文件 

如 果 要 引用 文件 层次 结构 中 更 上 层 目 
录 中 的 文件 ， 那 么 应 该 使 用 两 个 句点 和 一 个 
冬 杠 (参见 图 1.7.8) ， 例如，<a href="../ 
products.html">our products</a>。 每 个 ../ 都 
表示 “到 当前 文件 的 上 一 层 ”， 因 此 ，../../ 
会 向 上 走 两 级 ，../../../ 会 向 上 走 三 级 。 











1.7.8 从 图 1.7.10 中 可 以 看 到 ， 这 个 文件 位 于 





与 网 站 根 目录 下 的 当前 文件 夹 (about ) 同属 一 层 
的 文件 夹 (img ) 中 。 在 这 种 情况 下 ， 使 用 两 个 名 
点 和 一 个 笠 杠 上 升 一 级 ， 然 后 指出 子 目 录 (img ) ， 
再 跟 一 个 和 斜 枉 ， 最 后 是 文件 名 (实践 中 ， 可 以 为 
image.png 选择 一 个 更 具 描述 性 的 文件 名 ， 这 里 的 
名 称 仅 作 为 示例 ) 








@ 根 相 对 URL 


不 过 ， 如 果 文 件 位 于 Web 服务 右上 ， 应 
该 避免 使 用 像 ../.Vimg/family/vacation.jpg 这 
样 显 得 较为 笨拙 的 文件 路 径 ， 不 应 和 完 跳 到 网 
站 的 根 目录 再 顺 者 癌 下 找到 目标 文件 (参见 
图 1.7.9) 。 可 以 在 最 开始 使 用 一 个 冬 杠 ， 
这 样本 例 中 的 根 相 对 URL 就 是 /img/family/ 
vacation.jpg( 假定 img 文件 夹 位 于 网 站 的 根 
文件 夹 , 这 也 是 惯 第 的 用 法 ) 。 需要 强调 的 是 ， 
这 种 做 法 只 能 用 于 Web 服务器， 例如 在 网 站 
托管 服务 供应 商 的 Web 服务 器 上 ， 或 者 在 本 
地 计算 机 运行 的 Web 服务 器 上 (人 参见 提示 ) 。 


























根 文件 夹 包含 …… 
人 一 个 名 为 img 的 文件 夹 …… 


a 一 个 名 为 family 的 文件 夹 …… 


/img/family/vacation.jpg 
T 


he 一 个 名 为 vacation.jpg 的 文件 











1.7.9 相同 的 根 相 对 URL 可 用 于 所 有 的 页 面 ， 
不 管 页 面 在 网 站 目录 结构 中 的 具体 位 置 。 例 如 ， 
在 这 个 例子 中 ， 主 页 和 六 层 目 录 中 某 个 页 面 对 
vacation.jpg 的 定位 是 同样 简单 的 (这 并 不 代表 我 
建议 使 用 这 么 次 的 层级 结构 ) 
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如 果 不 是 在 服务 右 本 地 开发 网 站 ,通常 
应 使 用 相对 URL ( 当然， 除非 是 指 癌 其 他 服 
务 融 上 的 文件 ) 。 这 样 确保 了 将 页 面 从 本 地 
系统 传 到 服务 硕 变 得 容易 。 只 要 每 个 文件 的 
相对 位 置 保持 不 变 ， 就 不 必修 改 任何 路 径 ， 
链接 依然 有 效 。 

Apache 是 在 计算 机 上 运行 开发 服务 器 
最 常见 的 选择 。 可 以 在 网 上 搜索 “set up local 
(创建 本 地 开发 环境 ) 。 











dev environment” 


第 21 章 会 讨论 如 何 找到 一 个 Web 主机 。 


表 1.7.1 
文件 名 绝对 URL 可 以 在 任何 地 方 使 用 ) 
history.html http://www.site.com/about/history.html 
data.html http://www.site.com/about/info/data.html 
image.png http:/www.site.com/img/image.png 
news.html http:/www.remote.com/press/news.html 
Join.html http:/www.remote.com/sign-up/join.html 


@ 全 


Www. Site.com 


Www .remote .com 


b> press 
L news .html 
b> sign-up 


Lo join.html 


b= about 
> info 
国 欧 ] data.html 


本 history.html 
办 you-are-here.html 


= img 


0 image.png 





1.7.10 包含 URL 的 文档 (在 这 个 例子 中 是 
you-are-here.html ) 是 相对 URL 的 参照 点 。 换 句 话 说 ， 
相对 URL 是 相对 于 这 个 文件 在 服务 右上 的 位 置 。 
绝对 URL 与 其 所 在 的 位 置 无 关 ， 因 为 它们 总 是 包 
含 资源 的 完整 URL 
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3. 绝对 URL 和 相对 URL 的 比较 

为 了 巩固 上 述 知 识 ， 表 1.7.1 和 图 1.7.10 
共同 演示 了 绝对 URL 和 相对 URL 的 区 别 。 
图 1.7.10 显 示 了 两 个 网 站 的 文件 和 目录 结构 。 
表 1.7.1 描述 了 从 you-are-here.html 访问 各 个 
不 同文 件 的 方式 ， 这 些 文件 有 的 位 于 同一 个 
网 站 (www.site.com ) ， 有 的 位 于 男 一 个 网 站 

(www.remote.com ) 。 尽 管 表格 的 前 三 行 也 

可 以 使 用 绝对 URL， 但 访问 同一 网 站 的 文件 
时 最 好 使 用 相对 URL。 











绝对 URL 与 相对 URL 


相对 URL (只 能 在 you-are-here.html 中 使 用 ) 
history.html 
info/data.html 
/img/image.png 
(无 ,使 用 绝对 URL ) 
(无 ,使 用 绝对 URL ) 


1.8 HTML: 有 含义 的 标记 


本 和 曹 一 开始 便 将 在 网 页 中 标记 内 容 比 
作为 橱柜 物品 打 标 签 ， 因 此 你 已 经 了 解 到 了 
HTML 的 功能 和 相关 的 基础 知识 。 

这 里 强调 的 是 ，HTML 描述 的 是 网 页 内 
容 的 含义 ， 即 语义 (semantics ) 。 在 Web 社 
区 中 ， 语 义 化 HTML ( semantic HTML ) 指 的 
是 那些 使 用 最 恰当 的 HTML 元 素 进行 标记 的 
内 容 ， 在 标记 的 过 程 中 并 不 关心 内 容 显示 。 
我 想 你 应 该 同意 这 种 做 法 ， 这 比 胡乱 选择 元 
系 要 有 意义 得 多 。 

更 好 的 是 ， 这 样 做 也 非常 容易 ， 就 像 下 
面 对 我 们 的 基本 网 页 所 做 的 解释 那样 。 在 此 
之 后 ，“ 为 什么 语义 很 重要 ”进一步 强调 了 
编写 语义 化 HTML 是 构建 有 效 网 站 的 基石 。 
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1. 基本 HTML 页 面 的 语义 

本 章 前 面 提 到 ， 我 们 会 回 过 头 来 讲解 基 
本 页 面 ， 接 下 来 就 来 做 这 个 工作 。 给 你 一 分 
钟 时 间 整 理 一 下 思路 。 

好 了 ， 接 下 来 要 深入 地 了 解 标 记 内 容 背 
后 的 思维 过 程 。 在 此 需要 了 解 一 些 最 为 常用 
的 HTML 元 素 (参见 图 1.8.1 ) ， 所 有 这 些 元 
素 都 会 在 后 续 章 节 进 行 详细 前 述 。 正 如 你 看 
到 的 ， 创 建 拥有 良好 语义 的 HTML 并 不 难 。 
一 旦 熟悉 这 些 元 素 ， 这 一 过 程 就 会 变 得 很 简 


Ts 














<body> 
<article> 
<h1>The Ephemeral Blue Flax</h1> 


<img src="blueflax.jpg” width="300" 
height="175" alt="Blue Flax" /> 


<p>I am continually <em>amazed</em> at 

the beautiful, delicate «a href= 
"http://en.wikipedia.org/wiki/Linum_ 
lewisii" rel="external" title="Learn 
more about Blue Flax">Blue Flax</a> 
that somehow took hold in my garden. 
They are awash in color every morning, 
yet not a single flower remains 
by the afternoon. They are the very 
definition of ephemeral.</p> 

</article> 

</body> 

</html> 





1.8.1 基本 页 面 的 body 元 素 包 含 了 article、 
hi1、img、p、em 和 aa 元素 。 所 有 的 内 容 都 包含 在 
article 元 杂 中 


所 有 的 内 容 都 包含 在 article 元 素 中 ， 如 
图 1.8.1 所 示 。 人 简 言 之 ，article 定义 了 一 段 
独立 的 内 容 ， 其 他 地 方 可 以 重用 这 上 段 内 容 。 
在 我 们 的 基本 网 页 中 使 用 article 元 系 是 个 不 
错 的 选择 ， 但 并 非 每 个 网 页 都 要 这 样 编写 。 
第 3 章 会 详细 阐释 article 元 素 。 

接 下 来 是 标题 (参见 图 1.8.2 ) 。HTML 








提供 了 六 个 标题 级 别 ， 即 hi ~ h6。 其 中 ，hi 
征 最 重要 的 一 级 ，h2 是 hi 的 子 标题 ，h3 是 
h2 的 子 标题 ， 以 此 类 推 ， 就 像 你 使 用 文字 处 
理 软件 编辑 具有 多 级 标题 的 文档 一 样 。 


<h1>The Ephemeral Blue Flax</h1> 


图 1.8.2 标题 是 描述 页 面 概貌 的 重要 元 素 。 标 题 
确保 了 页 面 对 屏 磊 阅 读 器 用 户 来 说 更 具 可 访问 性 ， 
而 搜索 引擎 用 它们 确定 页 面 的 重点 

每 个 HTML 都 应 该 有 一 个 hl (或 者 多 个 
h1， 这 取决 于 页 面 的 内 容 ) 。 我 们 的 页 面 只 
有 一 个 标题 ， 显 然 应 该 使 用 hi。 第 3 曹 会 详 
细 介 绍 hi ~ h6。 

接 下 来 ， 是 一 个 图 像 (参见 图 1.8.3 ) 。 
img 元 系 是 呈现 图 像 的 主要 方式 ， 对 此 ， 无 需 
讨论 用 哪个 元 紊 合适。 如 果 图 像 没 有 加 载 成 
功 , 或 者 页 面 是 通过 仪 显示 文本 的 浏览 絮 查 
看 的 ( 这 种 情况 已 经 很 少见 了 ) ， 就 会 显示 
alt 属性 中 的 文字 。 屏 疤 阅 读 疾 可 以 对 alt 文 
本 进行 明 谈 〈 参 见 后 面 的 “无 障碍 访问 ”) 。 
第 5 章 会 详细 介绍 图 像 相 关 的 内 容 。 









































<img src="blueflax.jpg” width="300" 


height="175" alt="Blue Flax"” /> 








图 1.8.3 用 img 在 页 面 中 插入 图 像 很 容易 


段落 使 用 p 元 系 进 行 标记 ， 如 图 1.8.4 所 
示 。 正 如 印刷 材料 中 的 段落 所 显示 的 ， 一 个 
段落 可 以 包含 多 个 句子 。 如 果 页 面 需要 再 加 
一 个 段落 ， 只 需要 在 第 一 个 p 元素 之 后 再 加 
一 个 p 元 素 就 可 以 了 。 

段落 中 上 般 套 了 两 个 元 兹 (em 和 a) ， 分 
别 定 义 其 短语 内 容 的 含义 (图 1.8.4 ) 。 这 是 
HTMLS 提供 的 大 量 用 于 提升 段落 文本 语义 
的 短语 内 容 ( phrasing content ) 元 系 的 两 个 
例子 。 我 们 会 在 第 4 章 中 讨论 短语 内 容 元 素 
和 jp 元 素 。 
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<p>I am continually <em>amazed</em> at 
the beautiful, delicate <a href="http:// 
en.wikipedia.org/wiki/Linum lewisii" 
rel="external”" title="Learn more about 


Blue Flax">Blue Flax</a> that somehow 
took hold in my garden. They are awash in 
color every morning, yet not a single 
flower remains by the afternoon. They are 
the very definition of ephemeral.</p> 








图 1.8.4 p 元 系 可 以 包含 定义 段落 内 短语 语义 的 
其 他 元 素 ，em 和 a 是 两 个 例子 

em 元 紊 表示“ 强调 ”， 就 像 你 在 说 话 时 
会 重读 某 些 词语 。 在 我 们 的 示例 页 面 中 ， 它 
蝇 调 了 对 花 的 惊叹 之 情 (图 1.8.4 ) 。 记 住 ， 
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HTML 描述 的 是 内 容 的 含义 ， 因 此 em 代表 的 
是 语义 上 的 强调 ， 而 非 视觉 上 的 ， 不 过 通 篆 
会 用 斜体 表示 em 文本 〈 可 以 使 用 CSS 改变 这 
人 

最 后 ， 基 本 页 面 通过 a 元 素 定 义 了 一 个 
链接 。a 表示 “ 销 ” (anchor ) 。 链 接 可 请 是 
所 有 HTML 元 素 中 最 强大 的 元 素 ， 因 为 有 它 
才 得 以 形成 万 维 网 。 万 维 网 的 定义 就 是 ， 将 
一 个 页 面 与 男 一 个 页 面 或 资源 连接 起 来 ,或 
者 将 页 面 的 一 部 分 与 男 一 部 分 连接 起 来 。 在 
这 个 例子 中 ， 文 字 “Blue Flax” 是 一 个 指 问 
维基 百科 某 页 面 的 链接 ( 参见 图 1.8.5 ) 。 

















<a href="http://en.wikipedia.org/wiki/Linum lewisii" Tel= external title="Learn more about Blue Fl1ax > 





Blue Flax</a> 


l8.5 








a 元 素 定 义 了 一 个 指向 维基 百科 中 关于 Blue Flax 的 链接 。 可 选 的 rel 属性 指出 链接 指向 的 是 另 





一 个 网 站 ， 这 也 增加 了 语义 ( 没有 这 个 属性 链接 也 会 正常 工作 ) 。 可 选 的 title 属性 提供 了 有 关 所 指 页 面 








的 全 旺 9» 


相当 简单， 对 吧 ? 当 你 对 HTML 元 率 了 
解 更 多 之 后 ， 为 内 容 选 择 正确 的 元 素 通 常 是 
相当 简单 的 工作 。 偶尔， 你 会 过 到 一 些 内 容 ， 
有 一 种 以 上 的 合理 标记 方式 ， 这 也 没 问题 。 
有 时 候 不 能 直接 辨别 对 与 错 ， 当 然 大 多 数 时 
候 可 以 。 

无 论 如 何 , 浏览 需 都 会 将 内 容 显示 出 来 。 
浏览 器 还 没有 聪明 到 能 够 判断 一 段 内 容 更 适 
合 使 用 p 元 素 还 是 其 他 元 素 。 

最 后 需要 指出 ，HTML5 并 没有 试图 为 
每 一 种 能 想到 的 内 容 类 型 提供 对 应 的 元 素 ， 
因为 这 样 会 使 这 门 语言 变 得 笨重 。 相 反 ， 
HTMLS 采取 了 一 种 务实 的 态度 ， 其 所 定义 的 
元 素 履 盖 了 绝 大 多 数 情况 。 

HTML 之 美 ， 一 部 分 在 于 人 们 能 很 容 昂 
掌握 它 的 基础 ， 构 建 一 些 页 面 ， 并 在 此 基础 
上 不 断 取得 进步 。 因 此 ， 尽 管 HTML 元 素 大 
约 有 100 种 ， 但 不 要 被 这 个 数字 吓 到 ， 你 经 












































它 也 增强 了 a 元 系 的 语义 。 当 用 户 用 鼠标 滑 过 该 链接 ， 就 会 显示 title 属性 的 内 容 








常用 到 的 只 有 少量 核心 元 素 ， 而 其 余 的 则 较 
少 使 用 。 

你 已 经 7 了解 了 一 些 第 见 元 系 ， 因 此 你 已 
经 有 了 一 个 民 好 的 开始 。 


2. 为 什么 语义 很 重要 
这 里 列 出 了 使 用 语义 化 HTML 最 重要 的 
几 个 原因 。 我 们 没有 给 出 全 部 原因 ， 我 们 已 
经 在 前 面 捉 到 一 些 内 容 了 。 
口 提升 可 访问 性 和 互 操作 性 ( 内 容 对 于 信 
助 辅助 技术 的 残障 访问 者 是 可 访问 的 ， 
同时 对 于 台式 机 、 手 机 、 平 板 电脑 及 
其 他 设备 上 的 浏览 带 痢 是 可 访问 的 ) 。 
口 提升 搜索 引擎 优化 (SEO ) 的 效果 。 
口 使 维护 代码 和 添加 样式 变 得 容易 。 
口 (通常 ) 使 代码 更 少 , 页 面 加 载 更 快 。 


@ 无 障碍 访问 
你 可 能 对 无 障碍 访问 并 不 熟悉 。 它 指 
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的 是 让 内 容 对 所 有 用 户 可 用 ， 不 论 其 能 力 如 
何 ( 参见 www.w3.org/standards/webdesign/ 
accessibility ) 。 万 维 网 的 发 明 者 Tim Berners- 
Lee 曾 说 过 一 句 若 名 的 话 : “万 维 网 的 力量 在 
于 其 普 适 性 。 让 包括 残障 人 士 在 内 的 每 个 人 
都 能 访问 万 维 网 ， 是 极为 重要 的 一 点 。” 

任何 市 有 浏览 带 的 设备 都 可 以 显示 
HIML， 因 为 它 只 征文 本。 人 然而， 用 户 获 取 内 
容 的 方式 可 能 不 同 。 例 如 ， 视 力 正 党 的 人 可 
以 下 接 查 看 内 容 ， 而 视力 受 损 的 用 户 则 需要 
放大 页 面 , 调 大 字 扎 ,或 者 使 用 屏 才 阅读 大 (可 
以 将 内 容 明 谈 出 来 的 软件 ， 是 辅助 技术 的 一 
个 网 于 ) 

有 时， 屏 各 阅读 如 会 将 内 容 周 围 的 
HTML 元 系 的 类 型 谈 出 来 ， 证 用户 了 解 上 下 
文 。 例 如 ， 对 于 列表 ， 在 读 出 列表 各 个 条 日 
之 前 ， 屏 适 阅 读 各 会 自 完 告诉 用 户 这 里 有 一 
个 列表 。 类 似 地 ， 对 于 链接 ， 屏 大 阅读 各 会 
告诉 用 户 这 里 有 一 个 链接 ， 方 便 其 决定 是 否 
点 击 这 个 链接 。 

屏幕 阅读 硕 用 户 能 够 以 多 种 方式 浏览 隐 
页 ， 例 如 通过 键盘 按键 从 一 个 标题 跳 到 下 一 
个 标题 。 这 样 ， 他 们 可 以 先 了 解 一 个 页 面 的 
关键 主题 有 哪些 , 再 去 听 他 们 感 兴趣 的 内 容 ， 
而 不 必 把 整个 页 面 从 头 到 尾 听 下 来 。 

由 此 可 见 ， 对 残障 人 士 来 说 ， 好 的 语义 
产生 了 多 么 大 的 差别 。 

@ 搜索 引擎 优化 (SEO) 

SEO 的 效果 也 会 得 到 改善 ， 也 就 是 说 网 
页 在 搜索 引擎 中 的 排名 会 徘 衣 ， 因 为 搜索 引擎 
对 用 特殊 方式 标记 的 内 容 会 赋予 更 局 的 权重 。 
例如 ,标题 告诉 搜索 引 警 疏 虫 页 面 的 主要 主题 ， 
帮助 浏览 硕 对 页 面目 录 进 行 索引 (index ) 。 

@ 更 容易 维护 代码 和 添加 样式 

随 看 不 断 深入 阅读 本 书 ， 你 会 了 解 为 什 
































么 好 的 语义 能 使 代码 更 有 效 、 更 易于 维护 和 
添加 样式 。 你 将 了 解 到 ,借助 CSS， 我 们 可 
以 轻松 统一 特定 元 素 的 样式 ， 例如， 让 所 有 
的 段落 显示 为 深 灰 色 ， 并 使 用 Georgia 字体 。 
如 果 你 将 某 些 段落 标记 为 p 元 素 ， 某 些 标记 
为 其 他 元 素 ， 那 么 就 要 在 CSS 中 同时 为 这 两 
种 元 素 设 定 样式 ,这 就 添加 了 不 必要 的 复杂 性 。 

这 样 做 也 会 让 维护 HTML 变 得 困难 。 好 
的 语义 可 以 让 网 页 变 得 统一 和 “干净 ”。 这 
样 做 还 会 使 文件 尺寸 变 小 ， 从 而 浏览 右 加 载 
网 页 的 速度 变 得 更 快 。 


1.9 浏览 器 对 网 页 的 默认 显示 效果 


既然 控制 页 面 样式 的 是 CSS 而 非 HTML 
(参见 图 1.9.1 ) ， 为 什么 在 浏览 絮 中 查看 我 
们 的 基本 页 面 时 ， 某 些 文字 的 字号 会 比 其 他 
文字 的 字号 大 呢 ， 为 什么 有 的 文字 是 粗 体 或 
斜体 呢 (参见 图 1.9.2 ) ? 

原因 就 是 每 个 Web 浏览 器 都 有 一 个 内 
置 CSS 文件 (一 张 样式 表 ) ， 它 决定 了 每 个 
HTML 元 素 的 默认 样式 。 你 上 自己 创建 的 CSS 
可 以 覆 羡 这 些 样式 。 对 于 不 同 的 浏览 如 ， 默 
认 样 式 会 稍 有 差异 ， 但 总 体 上 相当 一 致 。 重 
要 的 是 ，HTML 所 定义 的 内 容 的 底层 结构 和 
含义 是 一 致 的 。 


块 级 元 素 、 行 内 元 素 以 及 HTML5 

容易 看 出 ， 有 些 HTML 元 素 ( 如 
article、h1 和 p) 从 新 的 一 行 开始 显示 ， 就 
像 纸 质 书 中 的 各 个 段落 一 样 ， 而 男 外 一 些 元 
素 ( 如 a 和 em) 则 与 其 他 内 容 显示 在 同一 行 ， 
如 图 1.9.2 所 示 。 需 要 强调 的 是 ， 这 是 浏览 各 
的 默认 样式 , 而 不 是 HTML 元 素 自身 的 样式 ， 
也 不 是 由 代码 中 两 个 元 素 之 间 的 空 行 引 起 的 
(参见 图 1.9.1 ) 。 
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<body> 
<article> 
<h1>The Ephemeral Blue Flax</h1> 


<img src="blueflax.jpg” width="300" 
height="175" alt="Blue Flax” /> 


<p>I am continually <em>amazed</em> at 
; the beautiful, delicate «a href= 

人 "http://en.wikipedia.org/wiki/Linum_ 

> lewisii" rel="external" title="Learn 
more about Blue Flax">Blue Flax</a> 
» that somehow took hold in my garden. 
"They are awash in color every morning, 
yet not a single flower remains 
by the afternoon. They are the very 
» definition of ephemeral.</p> 


<p><small>&copy; Blue Flax Society. 
</small></p> 

</article> 

</body> 

</html> 





图 1.9.1 在 基本 页 面 的 结尾 又 加 了 一 段 ， 这 样 在 
浏览 器 中 查看 网 页 时 就 能 看 到 每 个 段落 都 占据 单独 
的 一 行 ( 图 1.9.2 ) 。 顺 便 说 一 下 ，small 元 素 表 示 
的 含义 是 法 律 声明 等 条 文 细则 。 默 认 情 况 下 ， 它 比 
其 他 的 文字 显示 得 小 一 些 ， 但 是 显示 小 字号 并 不 是 
使 用 这 个 元 素 的 理由 

这 里 需要 多 解释 一 下 。 在 HTMLS5 之 前 ， 
大 多 数 元 系 都 可 以 划 入 块 级 (block-level， 从 
新 行 开 始 显示 ) 或 行内 (inline， 与 其 他 内 容 
在 同一 行 显 示 ) 两 种 类 别 。HTMLS 废弃 了 这 
些 术 语 ， 因 为 这 些 术 语 把 元 系 与 表现 关联 起 
来 ， 而 HIML 并 不 负 贡 表现 。 (通常 ， 旧 的 
行内 元 素 在 HTML5 中 都 被 归 类 为 短语 内 容 。) 

尽管 如 此 ， 浏 览 硕 不 需要 也 不 应 该 为 这 
些 元 系 改 变 默 认 显 示 规 则 。 毕 葛 ， 你 不 想 看 
到 两 个 段落 〈p 元 素 ) 连 到 一 起 ， 或 者 强调 的 
字句 (em 元素 包含 的 amazed ) 将 句子 打 断 ， 
单独 成 行 。 

因此 ， 通 党 标题、 段落 和 article 这 样 的 
元 条 从 新 行 开始 显示 ， 而 短语 内 容 (如 em、a 
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和 small ) 则 与 外 围 内 容 在 同一 行 显示 。 


Blue Flax (Linum lewisij) 





Blue Flax (Linum lewisii) 


Iam continually amazed at the beautiful, delicate Blue Flax that 
somehow took hold in my garden. They are awash in color every 
morning, yet not a single flower remains by the afternoon. They are 
the very definition of ephemeral. 


® Blue Flax Society. 


1.9.2 浏览 硕 的 默认 样式 表 将 标题 (h1 ~ h6 ) 
与 普通 文本 区 别 开 来 ， 对 em 文本 加 上 和 斜体 样式 ， 
对 链接 加 上 颜色 和 下 划 线 。 此 外 ， 有 的 元 素 从 单独 
的 一 行 开 始 ( 如 hi 和 p)， 而 其 他 一 些 元 素 显 示 
在 外 围 内 容 的 里 面 (如 a、em 和 small ) 。 用 你 自 
己 的 样式 表 窗 盖 这 些 显 示 规 则 很 简单 

尽管 HIMLS 不 再 使 用 块 级 、 行 内 这 些 术 
语 ， 但 这 样 划 分 有 助 于 理解 它们 的 含义 。 由 
于 在 HIMLS 之 前 就 成 为 HIML 的 常用 词 ， 
因而 这 些 术 语 在 教程 中 很 常见 。 本 书 也 会 偶 
尔 使 用 这 些 术 语 ， 以 说 明 元 素 在 默认 情况 下 
是 另 起 一 行 还 是 与 其 他 内 容 共 处 一 行 。 

从 第 7 章 开 始 将 详细 讲解 CSS， 不 过 现 
在 只 需要 知道 样式 表 与 HTML 一 样 是 纯 文 
本 ， 因 此 可 以 用 编辑 HTML 的 文本 编辑 器 创 
建 样 式 表 。 下 一 章 就 会 讲解 如 何 使 用 编辑 器 
操作 HTML 文件 。 


1.10 ”要 点 回顾 


HTML 基础 以 及 某 些 关键 最 佳 实践 为 构 
建 有 效 网 站 打下 了 基础 。 下 面 我 们 来 回顾 一 
下 本 章 讲述 的 要 点 。 
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口 一 个 网 页 主要 由 三 种 成 分 构成 : 文本 口 页 面 内 容 都 在 body 元 系 中 。 主 要 为 济 
内 容 、 对 其 他 文件 的 引用 和 标记 。 览 大 和 搜索 引擎 准备 的 指令 位 于 body 
D HTML 标记 由 元 每、 属性 和 值 构 成 。 元 素 之 前 ， 在 head 元 素 中 。 
口 通 滑 全 部 使 用 小 写字 母 编 写 HTML 口 用 语义 化 HTML 标记 内 容 ， 不 关心 它 
( DOCTYPE 是 一 个 例外 ) ， 用 引号 包 住 在 浏览 右 中 显示 的 样式 。 
属性 值 。 口 语义 化 HIML 提升 了 网 站 的 可 访问 性 ， 
口 为 文件 和 文件 夹 命 名 时 全 部 采用 小 写 让 网 站 更 有 效率 ， 并 使 网 站 维护 和 添 
字母 ， 词 与 词 之 间 用 短 横 线 分 隔 ， 而 加 样式 变 得 更 容易 。 
不 要 用 空格 或 者 下 划 线 。 D CSS 控制 HTML 内 容 的 表现 。 
口 始终 用 下 面 的 DOoCTYPE 声 明 开 始 D 每 个 浏览 帮 目 之 的 样式 表 规定 HTML 
HTML 文档 ， 让 浏览 右 知 道 这 是 一 个 的 默认 表现 样式 。 开 发 人 员 可 以 使 用 
HTMLS 页 面 。 自己 写 的 CSS 覆盖 这 些 规 则 。 


《1DOCTYPE html> 
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本 章 内 容 

口 规划 网 站 

口 创建 新 的 网 页 

口 保存 网 页 

口 指定 默认 页 面 或 主页 
口 编辑 网 页 

口 对 文件 进行 组 织 

口 在 浏览 硕 中 查看 网 页 
口 借鉴 他 人 灵感 


开始 编写 HTML 元 素 和 属性 代码 之 前 ， 
有 必要 了 解 如 何 创 建 使 用 这 些 代 码 的 文件 。 
本 章 将 介绍 如 何 创建 、 编 辑 和 保存 网 页 文件 ， 
还 会 涉及 一 些 设计 和 组 织 方面 的 注意 事项 。 

如 果 你 已 经 知道 如 何 创 建文 件 ， 没 有 而 
心 读 完 本 章 ， 可 以 直接 跳 到 讲解 HTML 代码 
的 第 3 章 。 


2.1 规划 网 站 


我 们 可 以 一 上 来 就 百 接 编写 网 页 ， 但 最 
好 还 是 先 对 网 站 进行 思考 和 规划 。 这 样 ， 你 
就 不 会 迷失 方 同 ， 而 且 也 会 减少 将 来 的 重组 
工作 。 比 起 简单 地 知道 如 何 编写 代码 ， 了 解 
如 何 创建 有 效 的 网 站 要 更 重要 一 些 。 下 面 介 
绍 的 内 容 并 不 全 面 ， 不 过 确 已 涵盖 了 不 少 需 
要 考虑 的 方面 。 


























处 理 网 页 文件 


规划 网 站 的 方法 
口 确定 为 什么 要 创建 这 个 网 站 ， 需 要 展 
示 什 么 内 容 。 





口 考虑 网 站 的 访问 者 。 应 该 如 何 调整 内 
容 使 之 吸引 这 些 访 问 者 。 

口 需要 多 少 个 页 面 ， 你 希望 网 站 是 怎样 
的 结构 ( 参见 图 2.1.1 ) ， 你 是 希望 访 
问 者 以 某 种 特定 的 次 序 浏览 网 站 ， 还 





是 希望 访问 者 可 以 目 由 地 探索 。 








图 2.1.1 画 出 网 站 结构 草图 ， 考 虑 它 可 能 包含 的 
内 容 ， 这 有 助 于 创建 者 决定 它 需 要 何 种 结构 
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口 在 纸 上 画 出 网 站 结构 的 草图 ， 确 定 你 
在 每 个 页 面 希 望 呈现 的 内 容 。 与 其 他 
的 工作 不 同 ， 这 项 工作 是 能 指导 网 站 
Hs 

口 为 页 面 、 图 像 和 其 他 外 部 文件 设计 一 
个 简单 且 一 致 的 命名 规则 ( 参见 1.6 市 )。 











如 果 你 对 万 维 网 还 不 太 熟悉 ， 先 上 网 
这 刘 ， 了 解 可 能 的 网 站 形式 。 可 以 从 竞争 对 
手 的 网 站 开始 入 手 。 


很 多 网 站 提供 内 容 战略 、 用 户 体 验 
(CUX) 、 设 计 、 开 发 等 与 建站 相关 的 资源 ， 
其 中 最 有 名 的 两 个 是 AList Apart (www. 
alistapart.com ) 和 Smashing Magazine (www. 


smashinemagazine.com ) 。 


Erin Kissane 的 文章 “A Checklist for 
Content Work” (www.alistapart.com/articles/ 
a-checklist-for-content-work/ ) 讲解 了 如 何 制作 
网 站 内 容 。 这 部 分 内 容 也 被 收录 到 了 她 关于 
内 容 战 略 的 一 本 书 中 。 


如 果 你 还 没有 成 为 设计 师 ， 只 是 一 位 
设计 新 手 ， 正 在 寻找 网 站 设计 方面 的 指导 ， 
Jason Beaird 的 《完美 网 页 的 视觉 设计 法 则 》 

( The Principles of Beautiful Web Design, 
SitePoint，2010 ) 和 Mark Boulton 的 《Web 设 
计 实 战 》(4 practical Guide to Designing for 
the Web，Five Simple Steps，2009 ) 或 许 会 引 
起 你 的 兴趣 。Boulton 的 书 最 开始 只 有 纸 质 
书 ， 现 在 又 在 网 上 发 布 了 免费 的 版 本 ( http:// 
designingfortheweb.co.uk/book/) 。 这 本 书 不 
仅 讲解 了 设计 理论 ， 还 介绍 了 Web 设计 者 的 
TA 





虽然 不 是 必需 的 ， 但 是 将 网 站 的 文件 
夹 结构 与 网 站 在 纸 上 的 组 织 结构 对 应 起 来 是 
很 常见 的 做 法 (图 2.1.1) ， 参见 2.6 节 。 


2.2 创建 新 的 网 页 


创建 网 站 并 不 需要 特殊 的 工具 。 你 可 以 
使 用 任何 文本 编辑 硕 ， 甚 至 是 Windows 日 市 
的 记事 本 Notepad， 如 图 2.2.1 和 图 2.2.3 所 示 ， 
或 者 OS X 上 的 免费 软件 TextWrangler ( www. 
barebones.com/products/textwrangler ) ， 如 网 2.2.1 
和 图 2.2.2 所 示 。 (Mac 也 自 带 一 款 编辑 器 ， 
名 为 TextEdit， 但 它 在 OS X 某 些 版 本 中 存在 
漏洞 ， 使 之 无 法 正确 处 理 HTML 文件 。 ) 


芒 TextWrangler 时 Edlt Text View Search Co Window 齐 双 Help 
BOA p Text Document | 
New with Statjlonery 一 - 
Open [with Clipboard) 
Opan fror FTP/SFTP Sarver 
Open File by Name 

Open Counterpart 

Open Recent 


Text Window OWN 
Disk Browser 所 鞠 人 
FTP/SFTP Browser 


Reopen Using Encoding 











图 2.2.1 打开 文本 编辑 从。 在 编辑 全 中 出 现 的 空 晶 
文档 中 输入 HTML， 或 者 先 选 择 File 一 New。 实 际 
的 菜单 选项 可 能 略 有 差异 。 如 果 使 用 TextWrangler 

(Mac ) ， 就 是 File 一 New 一 Text Document ( 文 
件 一 新 建 一 文本 文档 ) ， 如 上 半 部 分 所 示 。 下 半 部 
分 显示 的 是 Notepad (Windows ) 的 选项 


创建 新 网 页 的 步骤 

(1) 打开 文本 编辑 着。 

(2) 选择 File 一 New (文件 一 新 建 ) 创建 
一 个 新 的 空白 文档 ， 如 图 2.2.1 所 示 。 

(3) 按照 本 书 其 余部 分 的 解释 (从 第 3 章 
开始 ) 创建 HTML 内 容 。 

(4) 一 定 要 按照 2.3 市 中 的 说 明 保 存 文件 。 
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untitled text 


T (New Document) 





untitled text 二 





i| | 














网 页 的 HTML 代码 。 下 文 提示 部 分 列 出 了 一 些 功 
能 更 强 的 编写 代码 的 Mac 编辑 需 


司 Xx 


File Edit Format View Help 





图 2.2.3 这 是 记事 本 ，Windows 用 户 用 以 创建 
HTML 页 面 的 最 基本 的 程序 。 也 可 以 使 用 其 他 的 编 
辑 胡 (参见 提示 ) 


在 OS X 和 Windows 上 都 有 很 多 专门 
编写 HTML ( 和 CSS ) 代码 的 文本 编辑 器 。 
它们 的 代码 提示 和 代码 补 全 功能 让 你 可 以 更 
准确 、 更 快速 地 编写 代码 ; 它们 会 将 代码 突 
出 显示 ,方便 区 分 HTML 元 素 和 其 中 的 文本 
内 容 ; 它们 还 有 其 他 有 用 的 功能 。 记 事 本 没 
有 这 些 功 能 。 有 不 少 免费 的 HTML 编辑 器 ， 
不 过 一 些 收费 的 编辑 器 也 值得 购买 ， 通 常 还 
可 以 在 购买 之 前 试用 。 
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OSX 的 流行 编辑 器 包括 BBEdit 
(www.barebones.com/products/bbedit/ ) 、 
Coda( www.panic.com/coda/ ) 、Espresso ( http:// 
macrabbit.com/espresso/) 、Sublime Text 
(www.sublimetext.com ) 以 及 TextMate ( http:// 
macromates.com ) 。 通常 可 以 认为 TextWrangler 
是 BBEdit Lite 的 简化 版 。Sublime Text 也 有 
Windows 版 本 ,Windows 下 的 编辑 器 还 有 很 多 ， 

如 Notepad++ ( http://notepad-plus-plus.org ) ， 
等 等 。 在 网 上 搜索 “HTML 编辑 器 ”可 以 找 
到 更 多 的 编辑 器 。 


使 用 上 面 列 出 的 某 种 编辑 器 创建 新 网 
页 的 方法 也 是 类 似 的 。 要 编辑 已 经 存在 的 页 
面 ， 只 需 在 文本 编辑 器 中 选择 File 一 Open( 文 
件 一 打开 ) 并 打开 该 文件 (参见 2.5 节 ) 。 


请 不 要 使 用 Microsoft Word 这 样 的 文 
字 处 理 软件 编写 HTML 页 面 。 它 们 会 在 文件 
里 添加 一 些 无 用 的 或 无 效 的 代码 。 


2.3 ”保存 网 页 


用 文本 编辑 带 创 建 的 网 页 需要 在 多 种 平 
人 台 和 多 种 设备 上 的 多 种 浏览 带 查 看 。 为 了 让 
所 有 这 些 程序 都 能 访问 网 页 ， 网 页 需要 保存 
为 通用 的 “ 纯 文 本 ”格式 ， 不 包含 文字 处 理 
软件 可 能 应 用 的 任何 专用 格式 化 信息 。 

为 了 让 浏览 器 将 HTML 文档 作为 网 页 识 
别 并 知道 解释 其 中 包含 的 标记 ， 网 页 文件 应 
在 文件 名 中 使 用 .html 或 .htm 作为 扩展 名 。 
这 样 做 也 可 以 将 网 页 文件 与 不 是 网 页 的 普通 
文本 文件 区 分 开 来 。 上 述 两 种 扩展 名 痢 可 以 ， 
但 通常 还 是 使 用 .html， 因 此 推荐 读者 使 用 
.html 作为 文件 扩展 名 。 

有 了 .html 扩展 名 ， 网 页 的 图 标 会 显示 为 
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系统 默认 浏览 硕 的 图 标 ， 而 不 是 用 来 编写 这 
个 文件 的 编辑 问 的 图 标 ( 如 图 2.3.1 所 示 ) 。 
双击 网 页 文件 会 在 浏览 器 中 打开 它 ， 而 不 是 
在 文本 编辑 右 中 。 这 对 于 在 浏览 副 中 测试 页 








面 很 方便 ， 但 却 为 编辑 网 页 增加 了 一 个 额外 


的 步骤 (参见 2.5 市 ) 。 





stutf.txt webpage,html 


2.3.1 文本 文件 的 扩展 名 是 .txt， 在 Windows 
上 使 用 原生 的 文本 文件 图 标 进行 标识 ( 左 图 ) 。 双 
击 图 标 会 在 记事 本 中 显示 它 的 内 容 ( 如 果 你 将 文本 
文件 跟 其 他 的 文本 编辑 需 关 联 起 来 ， 就 会 局 动 那个 
软件 ) 。 对 于 网 页 文件 〈 右 图 ) ,不 管 是 用 哪个 
文本 编辑 器 创建 的 ， 只 要 是 以 .html 或 .htm 为 扩展 
名 ， 都 会 使 用 默认 浏览 融 图 标 进行 标识 〈 在 这 里 是 
Firefox ) 。 双 击 这 个 图 标 会 在 默认 浏览 套 而 不 是 文 
本 编辑 硕 中 显示 它 

总 之 ， 保 存 文 件 时 ， 需 要 将 文件 保存 为 
纯 文本 格式 , 并 使 用 html 或 htm 作为 护 展 名 。 


保存 网 页 的 步骤 

(1) 创建 网 页 之 后 ， 在 文本 编辑 器 中 选择 
File 一 Save As (文件 一 另存 为 ) ， 如 图 2.3.2 
所 示 。 

(2) 在 随后 弹出 的 对 话 框 中 ， 选 择 纯 文本 
或 文本 文档 (或 别 的 叫 法 ) 作为 文件 格式 。 

(3) 为 文档 添加 .html 或 .htm 的 扩展 名 (这 
一 点 非常 重要 ) 。 

(4) 选择 要 保存 网 页 的 文件 夹 。 

(5) 点 击 Save (保存) ， 如 图 2.3.3 和 
图 2.3.4 所 示 。 





























[File| Edit Format View Help 








New Ctri+N 
Open.,., Ctri+O 
Save Ctrl+S 
Save As... 

Page Setup,,. 

Print,,, Ctrl+R 
Exit 








2.3.2 在 文本 编辑 器 中 选择 File 一 Save As， 这 
里 显示 的 是 记事 本 。TextWrangler 也 有 这 个 选项 ， 
不 过 位 于 一 个 更 长 的 菜单 中 





2.3.3 在 记事 本 中 ， 为 文件 名 添加 .html 或 .htm 
的 扩展 名 ， 在 Save as type ( 保存 类 型 ) 下 拉 荣 单 
中 选择 文本 文档 ， 确 保 Encoding ( 编码 ) 选择 的 是 
UTF-8 (参见 最 后 一 项 提示 ) ， 点 击 Save。 其 他 文 
本 编辑 硕 中 的 选项 可 能 并 不 相同 〈 不 过 是 相似 的 ) 








Si ha: bial hil 


* || 了 玉 | | 下 webshe 
FAMIAITES 
th Appleations 
| Desktep 
是 Documents 
Downloads 
[| Meowitts 


有 Music 
部 Petres 


CEY HLS 


Line breaks: | Unin OF) 4 
Ed | Unicode (UTF-A) 3 





Nw Folder 


2.3.4 ”在 TextWrangler 中 ， 为 文件 起 名 ， 选 择 
保存 位 置 。TextWrangler 默认 以 UTF-8 进行 编码 (一 





可 以 从 Encoding 下 拉 沫 单 中 选择 其 他 编码 。 点 击 
Save 保存 文件 


和 EEE 使 用 .html 还 是 .htm 并 无 区 别 ， 但 推 
荐 使 用 .html， 因 为 它 更 常见 。 无 论 你 用 哪 种 
扩展 名 ， 请 保持 一 致 ， 因 为 使 用 相同 的 扩展 
名 有 助 于 后 续 记 住 URL。 
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即使 已 经 指定 了 .html 或 .htm 的 扩 
展 名 ，Windows 上 的 某 些 文本 编辑 器 也 会 在 
文件 名 末尾 加 上 默认 扩展 名 。 (注意 大 多 数 
专门 编辑 HTML 页 面 的 编辑 器 并 不 存在 这 
个 问题 。) 这 样 文件 名 就 变 成 了 webpage. 
html.txt， 这 样 的 文件 无 法 在 浏览 器 中 查看 。 
Windows 通常 会 隐藏 扩展 名 ， 也 导致 这 个 问 
题 变 得 隐藏 ， 它 尤其 容易 困扰 新 手 。 有 两 个 
解决 办 法 : 一 个 是 在 首次 保存 文件 时 将 文件 
名 包围 在 双 引 号 中 ， 这 样 能 防止 添加 额外 的 
扩展 名 ; 另 一 个 是 让 Windows 显示 文件 扩展 
名 (参见 图 2.3.5 和 图 2.3.6) ， 从 而 可 以 看 见 
程序 自动 添加 的 扩展 名 并 将 其 删除 。 





2.3.5 


不 同 的 Windows 版 本 中 荣 单 会 有 上 所 不 
同 ( 参见 图 2.3.6) 。 在 Windows8 中 ， 可 以 从 





Windows 资源 管理 锅 中 选择 View ( 查看 ) 选项 卡 
找到 这 个 菜单 。 如 果 想 在 泉 面 上 和 文件 夹 里 看 到 
文件 的 扩展 名 (如 .html) ， 就 要 选取 File name 
extensions( 让 复 选 框 打 上 人 义 ) 





选择 将 文件 保存 为 纯 文 本 格式 时 ， 文 
件 会 以 系统 默认 字符 编码 保存 。 如 果 需 要 创 
建 其 他 编码 的 网 页 ， 需 要 使 用 可 以 选择 编码 
类 型 的 文本 编辑 器 。 通 第 ，UTF-8 是 最 好 的 选 
择 。 如 果 编 辑 器 中 可 选择 的 文件 编码 类 型 包 
括 UTF-8, no BOM 或 类 似 的 选项 ， 请 选择 该 
项 。 否 则 ， 就 选择 UTF-8 ( 参见 图 2.3.7) 。 
有 时 ， 编 辑 器 的 UTF-8 模式 并 不 包含 BOM ， 
但 编码 类 型 选择 菜单 中 并 未 显 式 指出 这 一 点 。 
( 如果 你 对 BOM 的 含义 极 感 兴趣 ， 可 以 参见 
http://en.wikipedia.ors/wiki/Byte_order_mark, 
做 好 看 不 懂 的 准备 吧 ! ) 
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2.3.6 在 Windows 的 早期 版 本 中 ， 这 个 沫 单 是 
上 面 这 个 样子 的 (根据 Windows 版 本 的 不 同 ， 它 
们 稍 有 差异 ) 。 这 里 是 Windows 7 中 的 菜单 。 在 
Windows 资源 管理 硕 中 ， 选 择 Organize 一 Folder 
and search options( 组 织 一 文件 夹 和 搜索 选项 ) ， 
或 者 Tools 一 Folder Options ( 工具 一 文件 夹 选项 ) ， 
具体 取决 于 用 户 的 Windows 版 本 ， 显 示 图 中 的 对 
话 框 。 点 击 View 选项 卡 ， 回 下 滚动 ， 直 到 看 到 
Hide extensions for known file types ( 隐藏 已 知 文件 
类 型 的 扩展 名 ) 。 如 采 想 在 条 面 上 和 文件 夹 里 看 到 
文件 的 扩展 名 ( 如 .html ) ， 要 确保 这 个 选项 是 未 
选中 的 
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图 2.3.7 ”许多 文本 编辑 希 允 许 为 文件 选择 编 但 ， 
从 而 可 以 在 同一 个 文档 中 保存 不 同 语 言 中 的 符号 
和 字符 。 大 多 数 情况 下， 推荐 选择 UTF-8。 如 果 有 
UTF-8, no BOM 的 话 就 选 这 个 选项 ， 否 则 ， 下 接 选 
择 UTF-8。 有 的 编辑 各 ( 如 图 中 的 TextWrangler ) 
会 默认 选择 该 项 
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2.4 指定 默认 页 面 或 主页 


大 多 数 Web 服务 硕 都 会 根据 文件 名 识别 
每 个 文件 夹 中 的 默认 页 面 。 大 多 数 情况 下 ， 
系统 会 将 index.html 识别 为 默认 页 面 ， 人 参见 
图 2.4.1。 如 果 没 有 index.html， 束 会 继续 寻找 
index.htm、default.htm 等 文件 名 。 如 果 访 问 者 
输入 带 目 录 的 URL， 但 没有 指定 文件 名 ， 那 么 
就 会 打开 默认 页 面 ， 参见 图 2.4.2。( 目录 就 是 
文件 夹 ， 束 像 你 自己 计算 机 里 的 文件 夹 一 样 。) 
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2.4.1 将 文件 保存 为 index.html， 从 而 指 
定 这 个 文件 是 该 目录 下 的 默认 页 面 ( 上 图 是 
TextWrangler， 下 图 是 记事 本 ) 
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BARCELONA'S ARCHITECT 


Antoni Gaudrs incredible buildings bring millions of 
tourists to Barcelona each year. 


Gaudr s nor-conformity, already visible In his teenage years, coupled 
with his quiet but 有 rm devotion to the church, made a Unique 
foundation for his thoughts and ideas. His search for simplicity, 
based on his carefyl observations of nature, is quite apparent in his 


work, from the P 
to the Church of the Sax 


and its Incredible sculptures and mosalcs, 
Foamily and its organic, bulbous towers. 


LA SAGRADA FAMILIA 


2.4.2 当 访 问 者 输入 目录 的 路 径 而 没有 指定 
文件 名 时 ， 就 会 打开 使 用 默认 名 称 的 页 面 。 在 这 
个 例子 中 ， 输 入 的 URL 是 http://htmlcssvgs.com/ 
gaudi/。 如 果 输 入 http://htmlcssvgs.com/gaudi/index. 
html， 会 显示 相同 的 页 面 


在 网 站 最 顶层 目录 《〈 通 稼 称 为 根 目录 ) 
中 创建 的 默认 页 面 是 网 站 的 主页 。 当 访问 者 
只 输入 域名 而 没有 指定 路 径 信 息 ( 如 www. 








yourdomain.com ) 时 ， 就 会 显示 这 个 页 面 。 如 末 
输入 www.yourdomain.com/index.html， 结 果 是 一 
样 的 ( 这 里 假定 主页 的 文件 名 是 index.html ) 。 

类 似 地 ， 可 以 为 网 站 的 任何 一 个 目录 (其 
至 每 一 个 目录 ) 创建 默认 页 面 。 例如， 网 站 
中 /products/ 或 /about-us/ 目录 的 着 陆 页 ( 即 
首页 ) 也 应 该 是 index.html， 只 不 过 它们 放 在 
各 目的 目录 里 。 网 站 的 访问 者 通常 通过 主页 
或 每 页 都 有 的 主导 航 访问 这 些 页 面 。 


指定 网 站 主页 或 含 目 录 的 着 陆 页 的 方法 

在 目标 文件 夹 中 ， 将 文件 保存 为 index. 
html。( 当 你 将 文件 上 传 到 网 站 的 服务 硕 以 后 ， 
如 果 index.html 无 法 起 到 默认 页 面 的 作用 ， 请 
回 Web 主机 提供 商 咨询 。 关 于 将 网 页 上 传 到 
服务 需 ， 参 见 第 21 章 。) 





当 默 认 页 面 不 存在 时 

如 果 目 录 中 没有 默认 页 面 ， 有 的 服务 
器 就 会 将 目录 文件 列表 显示 出 来 (你 可 能 
并 不 布 望 向 访问 者 暴露 这 些 内 容 ) 。 为 了 
防止 这 种 情况 的 发 生 ， 应 该 在 网 站 每 一 个 
包含 HTML 页 面 的 目录 下 创建 一 个 默认 
页 面 。 另 一 种 办 法 是 修改 服务 器 的 配置 ， 
将 文件 列表 隐藏 起 来 (4 如果 它们 已 被 隐藏， 
也 可 以 将 它们 显示 出 来 ) 。 对 于 包含 图 像 、 
媒体 文件 、 样 式 表 以 及 JavaScript 等 资源 
的 目录 ， 建 议 隐藏 文件 列表 。 如 果 不 知道 
如 何 修改 服务 器 配置 ， 请 向 Web 主机 提 
供 商 咨询 。 


2.5 ”编辑 网 页 


因为 网 页 在 大 多 数 情 况 下 是 通过 浏览 如 
查看 的 ， 所 以 在 昌 面 上 双击 网 页 文件 ， 会 局 
动 默 认 浏 览 带 并 显示 它们 。 如 来 想 编辑 网 页 
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文件 ， 需 要 在 文本 编辑 肯 中 手动 打开 它 。 


编辑 网 页 的 步骤 

(1) 打开 文本 编辑 天 。 

(2) 选择 File 一 Open。 

(3) 找到 包含 目标 文件 的 目录 。 

(4) 如 有 果 没 有 看 到 目标 文件 ， 选 择 All 
Files ( 全 部 文件 ) 选项 (或 类 似 的 叫 法 ) ， 
如 图 2.5.1 和 图 2.5.2 所 示 。 在 不 同 的 程序 或 
平台 ， 这 个 选项 的 叫 法 和 位 置 都 有 细微 的 差 
异 ， 如 图 2.5.3 所 示 。 

(5) 点 击 Open， 束 可 以 开始 编辑 文件 了 。 
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在 Windows 的 一 些 文本 编辑 需 (如 记事 
本 ) 中 ， 不 会 自动 看 到 HTML 文件 。 选 择 All Files 
可 以 查看 所 有 文件 


图 2.5.1 





6 可 以 从 文件 所 在 的 文件 夹 直接 打开 文 
件 (如 果 文 件 在 桌面 上 上， 也 可 以 直接 从 桌面 
et 


辆 园 ”通常 , 要 保存 对 已 有 文档 进行 的 修改 ， 
只 需要 选择 File 一 Save 即 可 ,不必 担 心 2.3 
节 中 提 到 的 格式 问题 。 使 用 快捷 键 保 存 文 件 
更 快 。 通 第 ， 编 辑 器 中 为 保存 设置 的 快捷 键 
是 Command-S ( 对 于 OS X) 或 Ctrl-S (对 于 
Windows ) 。 
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2.5.2 显示 所 有 文件 以 后 选中 要 编辑 的 HTML 
文件 ， 点 击 Open 
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2.5.3 在 Windows 中 , 还 可 以 右 击 文档 的 图 标 ， 
在 弹出 菜单 中 选择 Edit 或 Open。 在 Mac 上 ， 碳 击 
图 标 或 文件 名 ， 在 弹出 菜单 中 选择 Open With， 青 
选择 要 使 用 的 文本 编辑 此 。 在 两 种 系统 中 ， 如 果 编 
辑 大 之 前 处 于 关闭 状态 ， 现 在 都 会 局 动 








2.6 ”组 织 文 件 


在 文件 数量 变 得 很 大 之 前 ， 最 好 考虑 好 
将 它们 放 在 什么 地 方 。 通 常 (但 非 必 须 ) 为 
网 站 的 主要 区 块 创建 单独 的 文件 夹 ， 将 相关 
的 HTML 页 面 放 在 一 起 。 


组 织 文 件 的 步 又 
(1) 创建 一 个 主 文件 夹 或 目录 存放 网 站 上 
所 有 可 用 的 资料 。 在 Mac 上 上， 在 Finder 中 选 
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择 File 一 New Folder (文件 一 新 文件 夹 ) ， 
如 图 2.6.1 所 示 。 在 Windows 中 , 右 击 上 划 面 (或 
你 选择 的 文件 夹 ) ， 选 择 New 一 Folder (新 
建 一 文件 夹 ) ， 如 图 2.6.2 所 示 。 然 后 为 文件 
夹 命 名 。 

(2) 根据 网 站 的 组 织 结 构 创 建 子 文件 来， 
如 图 2.6.1 和 图 2.6.3 所 示 。 例 如 ， 可 以 考虑 
为 网 站 的 每 个 部 分 创建 单独 的 文件 夹 ， 并 根 
据 需要 在 其 中 创建 单独 的 子 文件 夹 。 

(3) 为 网 站 的 图 像 、 样 式 表 (CSS 文件 ) 
和 JavaScript 文件 创建 一 个 或 多 个 文件 夹 ， 
每 个 文件 夹 还 可 以 有 各 目的 子 文件 夹 。 有 很 
多 种 组 织 方 式 ， 具 体 做 法 完全 取决 于 你 自 
己 。 一 种 做 法 是 像 图 2.6.1 和 图 2.6.3 中 显示 
的 那样 进行 组 织 ， 还 有 一 种 方法 是 将 CSS、 
JavaScript 文件 夹 同 图 像 文 件 夹 ( 及 其 他 文件 
来 ) 一 样 放 在 根 目录 ， 也 可 以 将 这 些 文件 夹 
一 起 放 在 根 目 录 下 的 assets (资源 ) 文件 夹 里 。 
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2.6.1 在 Mac 上 ， 选择 New Folder， 再 为 文件 
夹 命名 。 为 网 站 每 个 不 同 的 部 分 创建 独立 的 文件 夹 








第 (2) 步 和 第 (3) 步 是 可 选 的， 但 推 
荐 这 样 做 。 
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2.6.2 在 Windows 里 ， 在 蝎 面 或 资源 管理 带 中 
右 击 ， 再 选择 New 一 Folder 


Home Share View 


-个 | 哩 <« My Documents » website 








图 2.6.3 根据 需要 ， 可 以 将 文件 夹 分 解 成 多 个 子 


文件 夹 
使 用 短 的 、 描 述 性 的 名 称 作 为 文件 和 


文件 夹 的 名 称 ， 使 用 短 横 线 ( 而 不 用 空格 ) 
分 隔 不 同 的 单词 。 全 部 使 用 小 写字 母 可 确保 
URL 更 容易 输入 ， 页 面 更 容易 被 访问 到 。 关 
于 创建 文件 名 的 细节 ， 参 见 1.6 节 。 


2.7 ”在 浏览 器 中 查看 网 页 


创建 网 页 之 后 ， 你 肯定 希望 看 看 它 在 浏 
览 休 中 显示 的 样子 。 实 际 上 ， 你 并 不 知道 访 
问 者 使 用 什么 浏览 条 〈 不 同 的 浏览 硕 呈 现 页 
面 的 方式 会 有 差异 ) ， 因 此 建议 使 用 多 个 浏 
览 船 查看 页 面 ( 人 参见 20.2 市 ) 。 
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在 浏览 器 中 查看 网 页 的 步骤 

(1) 打开 浏览 器 。 

(2) 选择 File 一 Open File ( 在 不 同 的 浏 
览 大 中，Open File 项 的 表述 可 能 不 同 ， 但 不 
管 是 什么 ， 不 能 选择 Open Location ) ， 参 见 
图 2.7.1。 也 可 以 使 用 快捷 键 Command-O (对 
于 OSX) 或 Cul-O (对 于 Windows)。 使 用 快 
捷 键 会 直接 跳 到 第 (3) 步 ， 但 Internet Explorer 除 
外 一 一 下 会 完 弹出 一 个 如 图 2.7.1 所 示 的 对 话 框 。 

(3) 在 弹出 的 对 话 框 中 ， 找 到 目标 文件 
所 在 的 文件 来， 选中 该 文件 ， 点 击 Open ( 参 
见 图 2.7.2) 。 页 面 会 显示 在 浏览 絮 中 (参见 
图 2.7.3 ) ， 显 示 效 有 果 与 发 布 到 服务 各 的 网 页 
相同 (关于 发 布 网 页 ， 参 见 第 21 草 ) 。 对 于 
不 同 的 浏览 絮 ， 这 些 步 骤 可 能 有 些 差 异 。 
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图 2.7.1 在 O0SX 上 ， 从 浏览 需 中 选择 File 一 
Open File ( 上 图 为 Chrome ) 。 在 Internet Explorer 
中 使 用 Ctr-O， 在 Open (打开 ) 对 话 框 中 点 击 
Browse( 浏 览 ) 才能 跳 到 下 一 步 (下 图 ) 


CI 一 回 呈 
FAVORFTES 
局 All My Files 








2.7.2 ”选择 要 打开 的 文件 并 点 击 Open 按钮 (这 
里 显示 的 是 OSX 上 的 对 话 框 ， 不 过 Windows 上 的 
是 相似 的 ) 
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通常 还 可 以 双击 网 页 文件 名 或 图 标 来 
查看 该 网 页 。 如 果 你 已 经 打开 了 浏览 器 ， 还 
可 以 将 网 页 图 标 拖 到 浏览 器 窗口 ， 这 样 也 能 
打开 。 一 旦 掌握 这 种 方法 ， 它 往往 是 在 浏览 
器 中 查看 网 页 的 最 简单 方法 。 


一 些 现代 浏览 器 没有 File 一 Open 这 
样 的 菜单 选项 来 打开 网 页 ， 试 试 第 (2) 步 中 提 
到 的 快捷 键 ， 或 者 使 用 上 一 条 提示 中 提 到 的 
拖 息 方法 。 


fEE 如 果 网 页 没有 出 现在 选取 文件 的 对 话 
框 中 (图 2.7.2) ， 那 么 检查 一 下 文件 是 否 以 
纯 文 本 格式 保存 ， 且 以 .html 或 .htm 为 扩展 
名 (参见 23 节 ) 。 


和 在 浏览 器 中 查看 网 页 之 前 ， 不 需要 在 
文本 编辑 器 中 关闭 文档 , 但 一 定 要 保存 文件 。 
在 浏览 器 中 打开 网 页 之 后 ， 如 果 又 在 文本 编 
辑 器 中 对 页 面 作 了 修改 ， 那 么 需要 再 次 保存 
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一 


文件 ， 并 在 浏览 器 中 刷新 页 面 。 执 行 刷 新 操 
作 最 好 使 用 浏览 器 的 快捷 键 : Command-R( OS 
义 ) 或 Ctrl-F5 (Windows ) 。 使 用 这 些 快捷 键 
刷新 网 页 可 以 避免 浏览 器 使 用 缓存 的 网 页 (对 
于 Chrome， 参见 补充 材料 ) 。 


EB 只 有 在 Web 服 务 器 上 发 布 网 站 ( 参 


见 第 21 齐 ) 之 后 ， 访 问 者 才能 看 到 网 站 。 


禁用 Chrome 缓存 

Chrome 的 缓存 机 制 设 计 得 有 些 特 
别 。 即 便 使 用 快捷 键 Command-R ( 对 于 
OS X) 或 Ctrl-F5 ( 对 于 Windows) 刷新 
网 页 ， 有 时 还 是 会 显示 缓存 的 页 面 ， 而 不 
是 修改 保存 过 的 最 新 文件 。 查 看 网 页 的 时 
候 出 现 这 种 情况 会 产生 误导 ， 也 可 能 让 人 
人 
Chrome 缓存 ， 这 样 就 能 总 是 显示 最 新 的 
网 页 ， 方 法 如 下 。 

(1) 在 Chrome 中 按 下 Command-Option-I 
(对 于 OSX ) 或 CulShiftI( 对 于 Windows ) ， 
打开 Chrome 的 Developer Tools ( 开发 者 

5 

(2) 点 击 右 下 角 的 齿轮 图 标 。 

(3) 在 Settings (设置 ) 一 General ( 通 
用 ) 中 ,选择 Disable Cache ( 禁用 缓存 ) 。 

(4) 关闭 Settings 面板 ， 但 不 关闭 
Developer Tools。 只 要 Developer Tools 十 
打开 状态 的 ， 就 会 禁用 缓存 ( 除非 你 取消 
选择 Disable Cache ) 。 

顺便 提 一 下 ， 要 让 Developer Tools 脱 
离 Chrome 究 口 ， 显 示 为 独立 的 禄 口 ， 可 
以 点 击 Developer Tools 左下 角 的 图 标 。 





2.8 ”借鉴 他 人 灵感 


学 习 其 他 网 页 开发 和 设计 人 员 如 何 创建 
页 面 是 提高 HTML 代码 水 平 最 容易 的 方法 之 
-。 吉 好 ， 我 们 很 容易 就 可 以 查看 和 学 习 他 
人 的 HTML 代码 。 不 过 ， 文 本 内 容 、 图 像 、 
音频 、 视 频 、 样 式 表 及 其 他 外 部 文件 可 能 受 版 
权 保 护 。 通 常 的 做 法 是 借鉴 其 他 人 的 页 面 为 自 
己 的 HTML 寻找 灵感 ， 再 创建 自己 的 内 容 。 


1. 使 用 View Source 查看 其 他 设计 者 的 
HTML 代码 

(1) 在 浏览 硕 中 打开 网 页 。 

(2) 选择 View Source (查看 源 代码， 或 浏 
览 絮 中 的 其 他 类 似 选项 ) ， 如 图 2.8.1 和 图 2.8.2 
所 示 。 这 时 会 显示 HTML 代码 , 如 图 2.8.3 所 示 。 

(3) 如 果 需 要 ， 可 以 保存 该 文件 以 作 进 一 
步 研 究 。 














， 加 very definition ; 
I 失 


© Buwe Flax Society SC/atchoad 
Error Console 


Cat More Tools 


图 2.8.1 所 有 的 村 面 浏览 锅 都 有 让 你 查看 页 
面 HIML 源 代 码 的 沫 单 选 项 。 选 项 的 名 称 可 能 
是 View Source， 也 可 能 是 Page Source ( 图 中 的 
Firefox ) ， 或 者 其 他 类 似 的 名 称 。 在 Chrome 中 为 
Tools 一 View Page Source( 工具 一 查看 页 面 源 代 码 ) 


2. 通过 开发 者 工具 查看 其 他 设计 者 的 HTML 
代码 

查看 网 页 源 代码 的 为 一 种 方法 是 使 用 浏 
览 希 的 开发 者 工具 。 不 同 浏览 融 提 供 的 开发 
者 工具 并 不 一 样 ， 但 有 些 功 能 是 一 样 的 。 
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人 日 日 ) LBlueFlax(Linumlewisi) xx \ 





€ SC [htmlcssvqs.com/8ed/examples/chapter-07/inheritance.... 





Back 


The Ephemeral 民 Forward 


Reload 


Save As... 

Print... 

Translate to English 
View Page Source 下 
View Page Info 


Inspect Element 
garden. They 
a a are awash in 
图 2.8.2 ”大 多 数 浏览 需 还 可 以 在 页 面 上 右 击 ， 然 
后 在 弹出 的 菜单 中 选择 View Source ( 或 者 别 的 类 
似 叫 法 ) 。 图 上 显示 的 是 Chrome 中 的 菜单 。 这 通 
痹 是 查看 源 代码 最 方便 的 方法 ， 因 为 很 难 在 主 表单 
或 子 琳 单 上 找到 该 选项 














@Ag ) [Bloe Flax tinum lewisily X 


| j View~=source:htmlcssyqs.c x \ 





~ CG [| view-source:htmlcssvqs.com /8ed/examples/chapter-07.,.. 








1 
| <html lang="en"> 
| <head> 
<meta charset="utf-8" /> 
<title>Blue Flax (Linum lewisii)</title> 
<iink rel="stylesheet"” href="css/inheritance.css" 


g| <div> 
10 <hl>The Ephemeral Blue Flax</hl> 
' 


伴 <img src="img/blueflax. pg”" width="3I00" 
height="175" alt="Blue Flax (Linum lewisii)" /> 
13 


<p>I am continually <em>amazed</em> at the 
beautifuli, delicate Blue Filax 七 hat somehow took hold in my 


图 28.3 现代 浏览 各 在 其 自身 的 选项 卡 或 窗口 中 

显示 源 代码 ( 如 图 所 示 ) ， 而 旧 的 浏览 右 可 能 在 特 

定 的 文本 编辑 厦 中 显示 。 页 面 内 容 的 颜色 与 HTML 

元 素 、 属 性 和 属性 值 的 颜色 是 区 分 开 来 的 。 这 称 为 

语法 高 亮 (syntax highlighting ) 。 左 侧 显 示 的 行 号 

并 不 是 HTML 代码 的 一 部 分 ， 也 并 非 所 有 的 浏览 
人 妖 都 会 在 View Source 模式 中 显示 行 号 


这 些 工 具 提 供 了 一 种 交互 式 的 查看 源 代 
但 的 视图 。 可 以 审查 页 面 特定 部 分 的 HTML 
和 CSS， 在 浏览 硕 中 编辑 代 人 码 ， 并 立即 查看 
修改 后 的 效果 。 开 发 者 工具 适用 任何 网 站 (不 
仅仅 是 上 自己 的 ) 。 使 用 开发 者 工具 作 的 修改 
都 是 临时 的 ， 这 些 工 具 并 未 真正 修改 页 面 的 
HTML 和 CSS。 开 发 者 工具 是 学 习 HTML 和 
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CSS 不 可 多 得 的 资料 ， 通 过 它 可 以 查看 某 个 
| 
码 而 不 必 担 心 破坏 任何 东西 。 

关于 开发 者 工具 〈 既 有 现代 浏览 器 的 ， 
也 有 旧 浏 览 妖 的 ) 的 信息 ,参见 20.1 节 中 的 “ 浏 
览 郁 开发 者 工具 ”。 





不 存在 关于 谁 能 在 万 维 网 上 发 布 网 站 
的 规则 。 这 就 是 万 维 网 的 伟大 之 处 一 一 它 是 


一 种 进入 门槛 很 低 的 开放 媒体 。 你 可 以 是 一 
名 新 手 ， 一 位 专家 ， 或 者 介 于 二 者 之 间 的 角 
色 ，。 查看 其 他 网 站 源 代码 时 应 该 记 住 这 一 点 ， 
如 果 有 些 代 码 看 起 来 并 不 怎么 样 ， 不 要 仅仅 
因为 该 网 站 放 在 网 上 就 认为 其 制作 者 知道 的 
比 你 多 。 有 大 量 网 站 可 以 作为 编码 最 佳 实践 
的 范例 ， 也 有 大 量 网 站 做 得 并 非 那么 理想 。 
保持 批判 的 态度 ， 如 果 对 某 项 技术 的 合理 性 
有 所 怀疑 ， 请 查看 本 书 或 其 他 资源 。 


要 保存 代码 ， 可 以 将 代码 从 View 
Source 窗口 中 复制 到 文本 编辑 器 中 ， 再 保存 
文件 。 在 OS X 上 ， 使 用 Command-A 选择 所 
有 代码 ， 再 使 用 Command-C 复制 代码 。 再 切 
挽 到 编辑 器 中 ， 按 下 Command-V 粘贴 代码 。 

在 Windows 上 ， 过程 是 相似 的 ， 只 是 用 Ctrl 


键 代 替 Command 键 。 
要 同时 保存 源 代码 及 网 页 资源 (如 


图 像 ) ， 在 大 多 数 浏览 器 中 可 以 二 是 File 一 
Save As (或 File 一 Save Page As， 文件 一 页 
面 另 存 为 ) 。 不 过 ， 保 存 页 面 时 ， 浏 览 器 可 
能 改写 代码 的 Re 分 ， 因 此 代码 与 使 用 上 
一 条 提示 保存 的 代码 并 不 完全 一 样 。 


后 于 关于 查看 网 页 的 CSS， 参 见 8.7 节 。 
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基本 HTML 结构 


本 章 内 容 

口 开始 编写 网 页 

口 创建 页 面 标题 

口 创建 分 级 标题 

口 普通 页 面 构成 

口 创建 页 丑 

口 标记 导航 

口 标记 网 页 主要 区 域 

口 创建 文章 

口 定义 区 块 

口 指定 附注 栏 

口 创建 页 脚 

口 创 建 通用 容 需 

口 使 用 ARIA 改进 可 访问 性 
口 为 元 素 指定 类 或 ID 
口 为 元 条 添加 title 属性 
口 添加 注释 





本 章 讨论 的 是 构建 文档 基础 和 结构 所 需 
的 HTML 元素 , 即 网 页 内 容 主 要 的 声 义 化 容 条 。 

你 将 学 到 以 下 内 容 : 

口 开始 编写 网 页 ; 

口 HTMLS 的 文档 大 纲 ; 

D hi~h6、 header、nav、main、article、 
section、aside、footer 及 div 元 素 ( 其 
中 大 多 数 是 HTML5 新 增 的 元 素 ) ; 

口 使 用 ARIA 的 role 属性 提升 页 面 的 可 





访问 性 ; 

口 为 元 素 应 用 类 或 ID; 

口 为 元 素 应 用 title 属性 ; 

口 为 代码 添加 注释 。 

创建 清晰 、 一 致 的 结构 不 仅 可 以 为 页 面 
建立 恨 好 的 语义 化 基础 ， 也 可 以 大 大 降低 在 
文档 中 应 用 层 合 样式 表 (CSS ) 的 难度 (从 
第 7 草 开 始 讲解 CSS ) 。 


3.1 开始 编 与 网 页 


每 个 HTML 文档 都 应 该 包含 以 下 基本 成 
分 (如 图 3.1.1 所 示 ) 。 











<!lDOCTYPE html> 

<html lang="en"> 

<head> 
<meta charset="utf-8" /> 
<title></title> 

</head> 


<body> 


</body> 
</html> 





图 3.1.1 这 是 每 个 HTML 页 面 的 基础 。 缩 进 并 不 
重要 , 但 结构 很 重要 。 在 这 个 例子 中 , 默认 语言 (由 
lang 属性 指定 ) 被 设 为 代表 英语 的 en。 字符 编码 
被 设 为 UTF-8 


D DOCTYPE 
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D html 元 素 〈 包 含 lang 属性 ， 该 属性 不 
是 必需 的 ， 但 推荐 加 上 ) 

口 head 元 素 

口 说 明 字 符 编 码 的 meta 元 素 

D title 元 于 

口 body 元 素 

这 份 HTML 等 同 于 一 张 空 日 的 纸 ， 因 为 
body 里 面 没 有 任何 内 容 ， 如 图 3.1.2 所 示 。 








3.1.2 最少 HTML 基础 代码 在 Firefox 中 显示 
的 样子 。 如 你 所 见 ， 什 么 内 容 也 没有 ! 不 过 ， 很 快 
就 可 以 开始 添加 内 容 了 





在 添加 任何 内 容 或 其 他 信息 之 前 ， 需 要 
先 建 立 起 页 面 的 基础 。 


1. 编写 HTML5 页 面 开 头 的 步骤 

( 输入 <!DOCTYPE html>， 声 明 页 面 为 
HTMLS 文档 。〈 关 于 HTML 早期 版 本 的 相 
关 信 息 ， 参 见 本 市 末尾 的 “改进 后 的 HTML5 
DOCTYPE”。 ) 

(2) 输入 <html] lang="7amnguage-code ">， 
开始 文档 的 实际 HTML 部 分 。 其 中 , 1anguage- 
code 是 页 面 内 容 默认 语言 的 代码 。 例 如 ， 
<htm] lang="es"> 表示 西班牙 ，<html lang="fr"> 
表示 法 语 。 还 可 以 写 得 更 详细 些 ， 如 《htm] 
lang="en-US"> 表示 美国 大 语 ， 而 <html lang= 
"en-GB"> 则 表示 英国 英语 。 




















(3) 输入 <head>， 开 始 网 页 文档 的 头 部 。 

(4) 输入 <meta charset="utf-8"/> (或 <meta 
charset="UTF-8"/> ) ， 将 文档 的 字符 编码 
声明 为 UTF-8。 空 格 和 和 斜 杠 是 可 选 的 ， 因 此 
<meta charset="utf-8"> 跟 其 他 表达 式 形 式 都 
是 有 效 的 。 (UTF-8 以 外 的 其 他 字符 编码 也 
是 有 效 的 ， 不 过 UTF-8 的 适用 面 最 广 ， 很 少 
有 需要 用 其 他 编码 的 情况 。 ) 

(5) 输入 <title></title>。 这 里 将 包含 页 
面 的 标题 。3.2 市 中 将 讲解 如 何 添加 标题 文字 。 

(6) 输入 </head>, 结束 页 面 文档 的 头 部 。 

(7) 输入 <body>， 开 始 页 面 的 主体 。 这 里 
是 放置 页 面 内 容 的 地 方 。 

(8) 为 页 面 内 容 预 留 一 些 空 行 。 后 续 草 市 
会 讲解 如 何 创 建 内 容 。 

(9) 输入 </body>， 结 束 主体 。 

(10) 输入 </html>， 结 束 页 面 。 

步骤 似乎 有 点 多 ， 不 过 ， 由 于 所 有 的 页 
面 都 是 这 样 开 始 编写 的 ， 可 以 使 用 一 个 单独 
的 HTML 页 面 作为 创建 每 个 页 面 的 模板 ， 以 
节省 输入 的 时 间 。 实 际 上 ， 很 多 代码 编辑 需 
都 可 以 为 新 页 面 指定 初始 的 代码 ， 这 样 就 更 
简单 了 。 如 果 你 在 编辑 硕 中 没有 找到 Settings 
(设置 ) 或 Preferences ( 偏好 设置 ) 末 单 ， 
可 以 在 Help (帮助 ) 中 搜索 。 


2. 网 页 的 两 个 部 分 : head 和 body 

快速 回顾 一 下 第 1 草 学 到 的 知识 ，HTML 
页 面 分 为 两 个 部 分 : head 和 body， 如 图 3.1.1 
所 示 。DOCTYPE 出 现在 每 个 页 面 的 开 涉 ， 就 
像 一 本 书 的 序言 。 

在 文档 head 部 分 ,， 通 和 党 要 指明 页 面 标 题 ， 
提供 为 搜索 引擎 准备 的 关于 页 面 本 里 的 信息 ， 
加 载 样式 表 ， 以 及 加 载 JavaScript 文件 (不 过 ， 
出 于 性 能 考虑 ， 多 数 时 候 在 页 面 底 部 </body> 
标签 结束 前 加 载 JavaScript 是 更 好 的 选择 ) 。 
随 痢 进一步 阅读 本 书 ， 你 会 看 到 一 些 关 于 这 
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些 内 容 的 例子 。 除 了 title， 其 他 head 里 的 
内 容 对 页 面 访问 者 来 说 都 是 不 可 见 的 。 

body 元 系 包 住 页 面 的 内 容 ， 包 括 文本 、 

图 像 、 表 单 、 首 频 、 视 频 以 及 其 他 交互 式 内 容 ， 
也 就 是 访问 者 看 见 的 东西 。 本 书 有 好 几 半 都 
讲述 HTML 的 内 容 相 关 元 素 ， 本 章 会 提前 接 
触 到 其 中 的 一 些 。 

使 用 HTML5 DOCTYPE 可 以 确保 
浏览 器 以 可 靠 的 模式 呈现 页 面 ， 同 时 告诉 
HTML 验证 器 根据 HTMLS 允许 的 元 素 和 语 











法 检查 代码 。 第 20 章 会 讨论 HTML 验证 器 。 


HTMLS 的 DOCTYPE 不 区 分 大 小 写 。 
有 的 人 可 能 输入 《!doctype html>， 不 过 ,使 
用 《!DOCTYPE html> 是 更 常规 的 做 法 ， 参 见 
图 3.1.1。 


搜索 引擎 可 能 会 根据 lang 属性 指定 
的 语言 区 分 搜索 结果 ， 从 而 仅 显示 与 搜索 词 
语言 相同 的 页 面 。 屏 幕 阅 读 器 也 可 能 通过 指 
定 的 语言 调整 其 发 育 。 


改进 后 的 HTML5 DOCTYPE 


有 了 HTMLS5 以 后 , 编写 代码 的 开头 部 分 变 得 


HTMLS 的 DOCTYPE 短 得 让 人 惊讶 。 


要 查找 语言 代码 ， 可 以 使 用 Richard 
Ishida 的 语言 标签 查询 工具 (http:/rishida.net/ 
utils/subtags/ ) 。 


要 确保 将 你 的 代码 编辑 器 配置 为 
以 UTF-8 保 存 文 件 ， 与 代码 中 通过 <meta 
charset="utf-8”/> 语句 指定 的 编码 相同 ， 参 
见 图 3.1.1。 (如 果 指 定 了 另 一 种 编码 ， 就 按 
那 种 编码 保存 文件 。 ) 并 非 所 有 的 编辑 器 都 
默认 以 UTF-8 保存 文件 ， 但 大 多 数 编 辑 器 可 
以 在 菜单 或 面板 中 选择 编码 (参见 2.3 节 ) 。 
如 果 页 面 没 有 设置 为 UTF-8， 有 的 字母 (如 
带 重 音符 的 i、 带 波形 符 (~) 的 n) 就 会 变 
成 一 些 奇 怪 的 字符 。 


< 


TS 


如 


误 套 在 head 元素 里 的 代码 不 一 定 要 
缩 进 ， 参 见 图 3.1.1。 不 过 ， 缩 进 可 以 让 你 一 
眼看 出 head 从 哪里 开始 ， 包 含 什 么 内容 ， 以 
及 在 哪里 结束 。 在 有 些 页 面 中 ，head 变 得 很 
长 开 不 少见 。 


容易 多 了 ,特别 是 跟从 前 的 DOCTYPE 相 比 ， 


在 HIML4 和 XHTML 1.0 时 代 ， 有 好 几 种 可 供 选 择 的 DOCTYPE， 每 一 种 都 会 指明 
HTML 的 版 本 ， 以 及 使 用 的 是 过 渡 型 还 是 严格 型 模式 。 由 于 它们 太 难 记 ， 开 发 人 员 不 得 不 每 


次 都 从 某 个 地 方 把 这 些 代 码 复 制 进来 。 


例如 ， 下 面 是 XHTML 严格 型 文档 的 DOCTYPE。 


《!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/ TR/xhtml1/DTD/xhtml1-strict.dtd"> 


看 起 来 令 人 费解 。 


幸好 ， 所 有 的 浏览 器 ， 无 论 新 目 ， 都 理解 HIMLS 的 DOCTYPE， 因 此 你 可 以 坚持 在 所 


有 页 面 中 使 用 它 ， 忘 掉 过 去 的 那些 DOCTYPE。 


(唯一 可 能 用 到 过 去 那些 DOCTYPE 的 情况 


是 继承 一 个 旧 站 ， 而 网 站 的 拥有 者 不 允许 将 DOCTYPE 修改 为 HTML5 的 版 本 。 ) 
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3.2 创建 页 面 标题 


3.1 节 HTML 基础 代码 中 <title></title> 
仅 为 占 位 符 ， 现 在 开始 讨论 title 元 素 。 

每 个 HTML 页面 都 必须 有 一 个 title 元 
系 。 每 个 页 面 的 标题 都 应 该 是 简短 的 、 描 述 
性 的 ， 而 且 是 唯一 的 ， 如 图 3.2.1 所 示 。 在 大 
多 数 浏 览 硕 中 ， 员 面 标题 出 现在 窗口 的 标题 
栏 (Chrome 是 个 例外 ) 和 浏览 部 的 标签 页 中 ， 
如 图 3.2.2 所 示 。 页 面 标题 还 会 出 现在 访问 者 
浏览 历史 列表 和 书签 里 ， 如 图 3.2.3 所 示 。 














<!lDOCTYPE html> 
<html Jang= en > 
<head> 
<meta charset="UTF-8"” /> 
<title>Antoni Gaudi - Introduction 


> </title> 
</head> 
<body> 
</body> 
</html> 


3.2.1 title 元 素 必 须 位 于 head 部 分 ， 将 它 放 
置 在 指定 字符 编码 的 meta 元 又 后 面 


各 局 和 ntoniGaudi-1ntroduction 


Antoni Gaudi = Introduction 


四 Antoni Gaudi -= Introductic % W , 


3.2.2 在 大 多 数 浏览 器 (如 Firefox ) 中 ， 页 面 
标题 既 显 示 在 标题 栏 ， 也 显示 在 标签 页 上 。 不 过 ， 
Chrome (下 图 ) 只 在 标签 页 上 显示 页 面 标题 


或 许 更 为 重要 的 是 ， 页 面 标题 会 被 
Google、Bing、DuckDuckGo 、Yahool! 等 搜索 
引擎 采用 ， 从 而 能 够 大 致 了 解 页 面 内 容 ， 并 
将 页 面 标题 作为 搜索 结果 中 的 链接 显示 ， 如 
图 3.2.4 所 示 。 

总 之 ， 要 让 每 个 页 面 的 title 是 唯一 的 ， 
从 而 提升 搜索 引擎 结 采 排名 ， 并 让 访问 者 获 
得 更 好 的 体验 。 
































shovww Al| Hristory Etrir Shitt+H 


Ctrle shit+ Lel 


Clear Recent Hrstory.., 


Restore Prevwious Sesston 
Recenthy Closed Tabs 


Rectently Closed Windowms 





Gy Antoni Gaudi- Introduction [、 


3.2.3 页 面 标题 也 出 现在 访问 者 的 History 面板 
(如 图 ) 、 收 藏 夹 列表 以 及 书签 列表 中 


Antoni Gaudi - lgtroduction 


Antoni Gaudi. Many teurists are drawn te Barcelona to see 
Antoni Gaudi's incredible architecturs. Gaudi's non-conformity, 








3.2.4 或 者 最 午 要 的 是 ， 页 面 标题 通常 是 Google 
等 搜索 引擎 的 搜索 结果 中 链接 的 文字 ， 它 也 是 判 
断 搜 索 结 果 中 页 面相 关 度 的 重要 因素 。 此 处 为 
Google 中 显示 的 页 面 标题 和 部 分 主体 内 容 








创建 页 面 标题 的 步骤 

(1) 将 光标 放 在 文档 head 中 的 <title> 和 
</title> 之 间 。 

(2) 输入 网 页 的 标题 。 


title 元 素 是 必需 的 。 
title 中 不 能 包含 任何 格式 、HTML、 
图 像 或 指向 其 他 页 面 的 链接 。 


创建 新 页 面 时 ， 有 的 代码 编辑 器 会 预 
先 为 页 面 标题 填 上 默认 文字 ， 除 非 已 经 按照 
3.1 节 中 介绍 的 方法 使 用 了 特定 的 开头 代码 。 
要 注意 到 这 些 默 认 文字 ， 确 保 用 自己 的 标题 
替换 它们 。 


图 灵 社 区 会 员 wenshanjun 专 享 尊重 版 权 


34 第 3 革 基本 HTML 结构 
深入 探讨 页 面 标题 

他 RE title 
其 至 那些 相当 用 心 、 很 有 经 验 的 开发 人 员 
也 是 这 样 。 他 们 只 是 简单 地 输入 网 站 名 称 ， 
并 将 其 复制 到 全 站 每 一 个 网 页 。 或 者 更 糟 
糕 ， 让 title 文字 仍然 保存 为 代码 编辑 器 
默认 添加 的 文字 。 如 果 流 量 是 网 站 追求 的 
指标 之 一 ， 这 样 做 对 建站 者 和 潜在 的 访问 
人 

不 同 搜索 引擎 确定 网 页 排名 和 内 容 索 
引 规则 的 算法 是 不 一 样 的 。 不 过 ，title 
通常 都 扮演 着 重要 的 角色 。 搜 索引 擎 会 将 
title 作为 判断 页 面 主 要 内 容 的 指标 ， 并 将 
页 面 内 容 按照 与 之 相关 的 文字 进行 索引 。 
有 效 的 title 应 包含 几 个 与 页 面 内 容 密 切 
相关 的 关键 字 。 

作为 一 种 最 住 实践 ， 选 择 能 简要 概括 
SN te 
字 既 要 对 屏幕 阅读 器 用 户 友 好 ， 又 要 有 利 
| 

其 次 ， 将 网 站 名 称 放 入 title ( 这 不 是 
必需 的 ) 。 常 见 的 做 法 是 将 网 站 名 称 放 在 
title 的 开头 ， 不 过 将 页 面 特有 的 文字 放 在 
天 类 更 好 

建议 将 title 的 核心 内 容 放 在 前 60 个 
字符 〈 含 空格 ) 中， 因为 搜索 引擎 通 第 将 
超过 此 数目 (作为 基准 ) 的 字符 截断 。 不 
同 浏览 器 显示 在 标题 栏 中 的 字符 数 上 限 不 
尽 相 同 。 浏 览 器 标签 页 会 将 标题 截 得 更 短 ， 
因为 它 占 的 空间 较 少 。 


3.3 创建 分 级 标题 


HTML 提供 了 六 级 标题 用 于 创建 页 面 信 
息 的 层级 关系 。 使 用 hi、h2、h3、h4、hs 或 
h6 元 素 对 各 级 标题 进行 标记 ， 其 中 hi 是 最 高 





级 别 的 标题 ，h2 是 hi 的 子 标题 ，h3 是 h2 的 
子 标题 ， 以 此 类 推 。 为 徇 洁 起 见 ， 本 书 使 用 
h1 ~ h6 表示 这 些 元 系 ， 不 再 逐一 列 出 。 

为 了 理解 hi ~ h6 标题 ， 可 以 将 它们 比 
作 学 期 论文 、 销 售 报告 、 新 闻 报 道 、 产 品 手 
册 等 非 HTML 文档 里 的 标题 。 当 你 撰写 这 些 
文 草 时 ， 会 根据 需要 为 内 容 的 每 个 主要 部 分 
指定 一 个 标题 和 任意 数量 的 子 标题 ( 以 及 子 
子 标题 ， 等 等 ) 。 总 之 ， 这 些 标题 代表 了 文 
档 的 大 纲 。 网 页 的 分 级 标题 也 是 这 样 的 ( 参 
见 图 3.3.1 和 图 3.3.2 ) 。 











<!IDOCTYPE html> 
<html lang= en > 
<head> 
<meta charset="UTF-8" /> 
<title>Antoni Gaudi - Introduction 
</title> 


</head> 

<body> 

<h1i>Barcelona's Architect</h1> 

<h2 lang="es">La Sagrada Familia</h2> 
<h2>Park Guell</h2> 

</body> 

</html> 





图 3.3.1 用 标题 建立 文档 结构 ， 就 像 大 纲 一 样 。 
这 里， 标记 为 hz 的 La Sagrada Familia 和 Park 
Guell 是 标记 为 hi 的 顶级 标题 Barcelona’” s Architect 
的 子 标题 。 如 果 Park Guell 是 h3， 它 就 成 了 La 
Sagrada Familia 的 子 标 题 (也 是 hi 的 子 子 标题 ) 。 
如 果 继 续 编 写 页 面 其 余部 分 的 代码 ,相关 的 内 容 ( 段 
落 、 图 像 、 视 频 等 ) 就 要 紧 跟 在 对 应 的 标题 后 面 











1. 分 级 标题 的 重要 性 

对 任何 页 面 来 说 ， 分 级 标题 都 可 以 说 是 
最 重要 的 HTML 元 素 。 由 于 标题 通常 传达 的 
是 页 面 的 主题 ， 因 此 ， 对 搜索 引擎 而 言 ， 如 
果 标 题 与 搜索 词 匹配 ， 这 些 标 题 就 会 被 赋 子 
很 高 的 权重 ， 尤 其 是 等 级 最 高 的 h1 (这 并 不 
是 说 页 面 中 的 hi 越 多 越 好 ， 搜 索引 擎 还 是 足 
够 聪明 的 ) 。 
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<body> 
<h1>Product User Guidex</h1> 
<h2>Setting it up</h2> 


<h2>Basic Features</h2> 
<h3>Video Playback</h3> 
<h4>Basic Controls</h4> 
<h4>Jumping to Markers</h4> 


<h3>Recording Video</h3> 
<h4>Manual Recording</h4> 
<h4>Scheduling a Recording</h4> 


<h2>Advanced Features</h2> 
<h3>Sharing Video</h3> 
<h3>Compressing Video</h3> 
</body> 
</html> 


图 3.3.2 在 这 个 例子 中 ， 产 品 指南 有 三 个 主要 的 
部 分 ， 每 个 部 分 都 有 不 同 层级 的 子 标题 。 标 题 之 间 
的 空格 和 缩 进 只 是 为 了 让 层级 关系 更 清楚 一 些 ， 它 
们 不 会 影响 最 终 的 显示 效果 。 在 实践 中 我 通常 不 会 
添加 这 样 的 空格 和 缩 进 ， 如 果 你 想 添加 可 以 这 样 做 

对 人 来 说 ， 好 的 分 级 标题 也 很 重要 。 视 
力 展 好 的 用 户 需 要 通过 分 级 标题 确定 页 面 内 
容 。 屏 瑚 阅读 毅 用户 也 是 这 样 ， 只 不 过 是 通 
过 于 和 耳 示 。 他 们 通 稼 通过 键盘 按键 在 标题 
间 移 动 ， 这 样 可 以 快速 了 解 页 面 内 容 并 去 查 
看 最 感 兴趣 的 内 容 ， 而 不 用 把 整个 页 面 从 头 
到 尾 听 完 。 当 他 们 找到 感 兴趣 的 标题 之 后 ， 
可 以 选择 阅读 该 标题 下 的 内 容 。 可 见 nl ~ h6 
对 可 用 性 和 无 障碍 访问 的 作用 是 很 大 的 。 

总 之 ， 好 的 标题 层级 结构 对 你 和 你 的 访 
客 来 说 都 很 重要 。 


2. 使 用 标题 对 网 页 进行 组 织 的 步骤 

(1) 在 HIML 的 body 部 分 ， 输 入 <hn>， 
其 中 由 是 1 ~ 6 的 数字 ， 此 数字 取决 于 要 创 
建 的 标题 的 级 别 。hli 是 最 重要 的 标题 ， 而 h6 
则 是 最 不 重要 的 标题 。 

(2) 输入 标题 的 内 容 。 
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(3) 输入 </hn>， 其 中 xn> 是 与 第 (上 步 中 
相同 的 数字 。 


天 时 在 默认 情况 下 ,浏览 器 会 从 hi 到 h6 
逐 级 减 小 标题 的 字号 ， 如 图 3.3.3 所 示 。 (在 
有 的 浏览 器 里 ， 谱 套 在 特定 元 素 中 的 hl 和 h2 
在 默认 情况 下 看 起 来 是 一 样 的 。 ) 不 过 别 忘 
了 要 依据 内 容 所 处 的 层次 关系 选择 标题 级 数 ， 
而 不 是 根据 你 希望 文字 应 该 显示 的 大 小 。 可 
尺 按照 你 布 望 的 样子 为 标题 添加 样式 ， 包 括 
字体 、 字 号 、 颜 色 等 。 用 CSS 实现 这 些 样 式 
的 详细 说 明 参 见 第 10 章 。 


Barcelona's Architect 
La Sagrada Familia 
Park Guell 


全 后 向 Default display of h1-h6 


i Default display of hl1-h6 





This is a heading level one (hl) 


This is a heading level two (h2) 
This is a heading level three (h3) 

This is a heading level four (h4) 

This is a heading level five (hs) 


This js a heading level six (h6) 








图 3.3.3 在 默认 情况 下 ， 所 有 的 标题 都 以 粗 体 显 
示 ，hd 的 字号 比 h2 的 大 ， 而 hz 的 又 比 h3 的 大 ， 
以 此 类 推 。 每 个 标题 之 间 的 间隔 也 是 由 浏览 右上 默 
认 的 CSS 制造 的 ， 它 们 并 不 代表 HTML 文档 中 有 


人 一 
全 1 
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创建 分 级 标题 时 ， 要 避免 跳 过 某 些 
级 别 ， 如 从 h3 直接 跳 到 h5。 不 过 ， 允 许 从 
低级 别 跳 到 高 级 别 的 标题 。 例 如 ， 在 图 3.3.2 
中 ，<h4>Scheduling a Recording</h4> 后 面 
紧 跟 着 <h2>Advanced Features</h2> 是 没有 
问题 的 ， 因 为 包含 Scheduling a Recording 的 
Basic Features ( 也 是 h2 ) 在 这 里 结束 了 ， 而 
Advanced Features 的 内 容 开 始 了 。 


不 要 使 用 hl ~ h6 标记 副标题 、 标 语 
以 及 无 法 成 为 独立 标题 的 子 标题 。 例 如 ， 假 
设 有 一 篇 新 闻 报 道 ， 它 的 主 标题 后 面 紧 跟 着 


一 个 副标题 ， 这 时 ， 这 个 副标题 就 应 该 使 用 


段落 (参见 图 3.3.4 ) 或 其 他 非 标 题 元 素 。 


先前 ，HTML5 包含 了 一 个 名 为 
hgroup 的 元 素 ， 用 于 将 连续 的 标题 组 合 在 一 


起 ,W3C 将 这 个 元 素 从 HTML5 规 范 中 移 除了 。 


HTML5 的 文档 大 细 


<h1>Giraffe Escapes from Zoo</h1> 
<p class="subhead">Animals Worldwide 


Rejoice</p> 


<p>... story Content ...</p> 











图 3.3.4 这 是 标记 文章 副标题 的 一 种 方法 。 可 以 
添加 一 个 class， 从 而 能 够 应 用 相应 的 CSS。 该 
class 可 以 命名 为 subhead 等 名 称 


人 另外 注意 一 下 ， 图 3.3.1 中 对 一 个 hz 
使 用 了 lang 属性 ， 用 以 表明 这 里 的 文字 为 页 
面 默认 语言 (英语 ， 因 为 《xhtml lang="en">) 


之 外 的 另 一 种 语言 ( 西班牙 语 ， 由 es 表示) 。 
在 本 书写 作 之 际 ， 曾 有 人 提议 在 


HTML 中 引入 subhead 元素， 用 于 对 子 标题 、 
副标题 、 标 语 、 暑 名 等 内 容 进 行 标 记 。 目 前 
还 无 从 知道 这 个 提议 是 否 会 被 采纳 。 


在 本 书写 作 之 际 ，HTMLS5 对 如 何 处 理 位 于 article、aside、nav 和 section 元 素 中 的 
h1 ~ h6 有 一 套 算 法 。 该 算法 通常 称 为 HTML5 文档 大 纲 (HTMLS5 document outline ) 。 不 
过 ， 目 前 还 没有 浏览 器 实现 这 套 算 法 ， 而 且 也 看 不 到 支持 的 迹象 。 而 有 全， 屏幕 阅读 器 中 只 有 
JAWS ( 一 款 运 行 于 Windows 下 的 屏幕 阅读 器 ) 支持 ， 而 它 的 实现 还 存在 问题 。 

鉴于 此 ，W3C 已 经 将 文档 大 纲 列 入 可 能 从 2014 年 最 终 定稿 的 规范 中 移 除 的 特性 。 即 便 
文档 大 纲 最 终 留 在 规范 中 ， 或 者 浏览 器 将 其 实现 了 ， 我 们 还 是 可 以 按照 这 里 介绍 的 方法 对 分 
级 标题 进行 标记 。 这 种 方法 不 仅 适 用 于 当前 环境 ， 还 足以 应 对 未 来 (因为 文档 大 纲 不 会 对 页 


面 造成 破坏 ) 。 


由 此 看 来 ， 你 大 可 不 必 理 会 文档 大 纲 。 这 里 提 到 文档 大 纲 只 是 为 了 让 你 在 其 他 地 方 看 到 


时 不 必 犹 移 是 否 需要 了 解 其 机 理 。 


3.4 普通 页 面 构成 
你 肯定 已 经 访问 过 了 大 量 像 图 3.4.1 中 显 





示 的 那 种 网 站 。 抛 开 内 容 不 谈 ， 我 们 可 以 看 


到 该 页 面 有 四 个 主要 组 件 : 带 导 航 的 页 头 、 
显示 在 主体 内 容 区 域 的 文章 、 显 示 次 要 信息 
的 附 广 栏 以 及 页 脚 ， 如 图 3.4.2 所 示 。 
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» Barceiona s Arnc 和 iacs * LaSngrade Famllin * park Ousl) 


BARCELONA'S ARCHITECT 


Antonmi Gandjs ipcredible buildings bring milioes of tourists to 
Barcelona each year. 


Gaudls nmon-conformity, already visible in bis tecnage years, 
coupled wah hs quiet but 有 rm devotion to tbe church, made a 
uniqoe foundatjion for his thoughts and ideas His search for 
simplcity, based on his careful Dbeervatioas of nature, is quite 
wparenmt in bls work, from the Park Guell and Rs Incredible 
sculptures and rtmosaics, to the Charch of the Sacred Fasyly and 
its orpanic, bjboes towers 


LA SAGRADA FAMILIA 


The complicatedly narmed and curiously umfinished 


rmasterpiece that 站 the Expianocy Temple of the 

Sucred Pamily is the most visited bading in 

Bearcelonn jn ER Gaudl combines his vision of nature 
and archinecture with his devotioa tw his fai The Sagrada 
Familis attracts even the nom-religious to its Goors in large part 
due to its tragic story nmd ts tll unfinished stnte, of which the 
everpresent scafiolding and cranes are permanent remipders. 


PARK GUELL 


The Puk Gocl always reminds me of Boward 

Roatk im Am Wand's The Fountainhead 

Goudl's project in ihe Park Oool was to bulld a 
residentian] community whose residents would Jove where they 
lived, lt wns pever finished. 


Perbaps that is for the best since now we all get lo enjoy it. The 
Pask Goell bs se on a hal] overlooking practically all of Barcelona, 
Ns beauniful and even comfortable serpertine bench i filbed with 
foreigners and Jocals alike every day of the week. Its rosaic lizands 
have becorne synmonymous wb (he city self 
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现在 ， 在 没有 3 引入 CSS 的 情况 下 ， 你 还 
无 法 像 这 样 为 页 面 永 加 样式 。 我 们 将 从 第 7 
草 开 始 学 习 CSS， 在 第 10 章 开 始 学 习 如 何 对 
文字 进行 格式 化 、 琴 加 颜色 等 ， 在 第 11 章 学 
习 多 栏 布局 。 

不 过 ， 应 用 到 这 些 和 常规 页 面 结构 的 语义 
都 是 非常 相似 的 ， 与 布局 无 关 。 本 和 草 剩 余 章节 
的 大 部 分 内 容 都 会 讲解 这 些 结构 。 按 照 从 页 
面 顶端 向 下 的 顺序 ， 将 依次 讲解 用 header、 
nav、main、article、section、aside 和 
footer 定义 页 面 的 结构 ， 以 及 用 来 添加 额外 
样式 信息 或 实现 其 他 目的 的 通用 容 喜 div。 除 
了 div 以 外 ， 这 些 元 素 都 是 HTML5 推出 后 才 
有 的 。 

在 学 习 这 些 元 素 的 过 程 中 ， 不 要 关心 它 
们 在 示例 布局 中 的 位 置 ， 而 应 该 关注 它们 的 
语义 。 


接 下 来 ， 我 们 还 会 完 大 概 了 解 一 下 其 他 

















元 系 ， 如 岂 (无 序列 表 ) 和 a (链接 ) ， 后 
续 章 节 会 详细 讲解 。 


3.5 创建 页 导 


如 果 页 面 中 有 一 块 包含 一 组 介绍 性 或 导 
航 性 内 容 的 区 域 ， 应 该 用 header 元 素 对 其 进 
行 标记 。 

一 个 页 面 可 以 有 任意 数量 的 header 元 
素 ， 它 们 的 含义 可 以 根据 其 上 下 文 而 有 所 不 
同 。 例 如 ， 处 于 页 面 顶端 或 接近 这 个 位 置 的 
header 可 能 代表 整个 页 面 的 页 眉 (有 时 称 为 
页 头 ) ， 如 图 3.5.1 所 示 。 通 常 ， 页 眉 包 括 网 
站 标志 、 主 导航 ( 图 3.5.2 ) 和 其 他 全 站 链接 ， 
其 至 搜索 框 ( 图 3.5.3 ) 。 这 无 疑 是 header 元 
素 最 常见 的 使 用 形式 ， 不 过 不 要 误 认 为 是 唯 
一 的 形式 。 


图 3.4.1 一 个 普通 的 布局 ， 顶 部 是 主导 航 ， 左 侧 
是 主要 内 容 ， 右 侧 是 附注 柱 ， 底 部 是 页 脚 。 要 让 页 
面 成 为 这 个 样子 ， 需 要 添加 CSS 


带 导航 的 页 头 


相关 但 较为 
次 要 的 信息 








图 3.4.2 页 面 的 常规 信息 类 型 。B 





方式 ， 不 过 是 很 常见 的 一 种 
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<body> 
<header role="banner"> 


<nav> 
<Ul> 
<li><a href="#gaudi">Barcelona's 
Architect</a></1i> 
<1li lang="es"><a href="#sagrada- 


familia">La Sagrada Familiax</a> 
< 
<li><a href="#park-guell">Park 
Guell</a></1i> 
</ul> 
</navy> 

</header> 

</body> 

</html> 





3.5.1 这 个 header 代表 整个 页 面 的 页 眉 。 它 包 
含 一 组 代表 整个 页 面 主 导航 的 链接 ( 在 nav 元素 
中 ), 可 选 的 role="banner" 并 不 适用 于 所 有 的 页 眉 。 
它 显 式 地 指出 该 页 眉 为 页 面 级 的 页 眉 ， 因 此 可 以 提 
高 可 访问 性 。 图 3.5.4 中 也 显示 了 一 个 这 样 的 例子 。 
要 了 解 更 多 信息 ， 参 见 3.13 节 ( 对 于 nav 元素 的 
role 属性 值 ， 参 见 3.6 市 ) 











Mntonl Gaudi: Barcelona's architeet 


a Barcelonas Architect 


* Lasvaprada Familia 
s Park Guell 








3.5.2 ”包含 导航 的 页 面 级 页 丑 


Search: Oo 


photobarcelona... 


Gamercne 3 Car VER 四 ee 


»- resoturcoas 。 rchives 品 





图 3.5.3 ”这 是 为 一 个 网 站 的 页 眉 ( 包含 样式 ) 。 
这 种 页 面 级 页 眉 的 形式 在 网 上 很 常见 。 它 包含 网 站 
名 称 ( 通常 为 一 个 标识 ) 、 指 向 网 站 主要 板块 的 导 
航 链 接 以 及 一 个 搜索 框 


header 也 很 适合 对 页 面 深 处 的 一 组 介绍 
性 或 导航 性 内 容 进 行 标记 。 例 如 ， 一 个 区 块 
的 目录 ， 人 参见 图 3.5.4。 














<body> 

<header role="banner"> 
..。[ 网 站 标识 、 导 航 等 ] ... 

</header> 


<main role="main"> 
<article> 
<header> 
<h1i>Frequently Asked Questions</h1> 
<nav> 
<U]> 
<li><a href="#answer1">What is 
your return policy?/a><l1i> 
<li><a href="#answer2">How do I 
find a location?/a><1i> 


</U]> 
</navy> 
</header> 


<!-- 第 二 个 header 的 链接 指向 这 里 --> 
<¢article id="answer1'"> 
<h2>What is your return policy?/h2> 
<D» son [答案 | </ 
</article> 


<article id="answer2"> 
<h2>How do I find a Jlocation?</h2> 
<p> ..。[ 答 案 ] ... </p> 

</article> 


《</article> <!l-- 结束 父 元 素 article --> 
</main> 
</body> 
</html> 





3.5.4 这 个 页 面 有 两 个 header， 一 个 是 整个 页 
面 的 ， 男 一 个 是 Frequently Asked Questions 的 父 元 
素 article 的 。 注 意 第 一 个 并 不 包含 任何 hl ~ h6 
标题 ， 而 第 二 个 则 有 。 而 且 ， 只 有 第 一 个 header 
中 有 role="banner" ， 因 为 它 是 页 面 级 的 页 丑 


header 通常 包含 其 自身 的 标题 (hl ~ 
h6 ) ， 但 这 并 不 是 强制 性 的 。 例 如 ， 图 3.5.3 
中 有 标题 ， 但 图 3.5.1 中 就 没有 。 


创建 页 眉 的 步骤 
(1) 将 光标 放置 在 需要 创建 页 眉 的 元 素 里 。 
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(2) 输入 <header>。 

(3) 输入 页 眉 的 内 容 ， 包 括 各 种 类 型 的 内 
容 ， 它 们 分 别 由 各 自 的 HTML 元 素 (本 书 余 
下 部 分 将 会 讲 到 其 中 的 大 多 数 ) 进行 标记 。 
例如 ，header 可 以 包含 hi ~ h6 标题 、 标 识 、 
导航 、 搜 索 框 ， 等 等 。 


(4) 输入 </header>。 
只 在 必要 时 使 用 header。 大 多 数 情况 


下 ， 如 果 使 用 hl ~ h6 能 满足 需求 ， 就 没有 
必要 用 header 将 它 包 起 来 。 


header 与 hi ~ h6 元 素 中 的 标题 ( 参 
见 3.3 节 ) 是 不 能 互 换 的 。 它 们 都 有 各 自 的 语 
义 目 的 。 


不 能 在 header 里 谋 套 footer 元 素 或 
另 一 个 header， 也 不 能 在 footer 或 address 
元 素 里 误 套 header。 


header 不 一 定 要 像 示 例 那 样 包含 一 个 
nav 元素 (图 3.5.1 和 图 3.5.4) ， 不 过 在 大 多 
数 情 况 下 ， 如 果 header 包含 导航 性 链接 ， 就 
可 以 用 nav。 在 图 3.5.4 所 示 的 例子 中 ，nav 包 
住 Frequently Asked Questions 链接 列表 是 恰当 
的 ， 因 为 它 是 页 面 内 的 主要 导航 组 (将 在 3.6 
TP 


要 了 解 header 如 何 取代 HTMLS5 之 前 
版 本 中 div 元 素 的 一 个 功能 ， 参 见 3.12 节 。 


3.6 ”标记 导航 


HTML 的 早期 版 本 没有 元 素 明 确 表 示 主 
导航 链接 的 区 域 ， 而 HTML5 则 有 这 样 一 个 元 
系 ， 即 nav。nav 中 的 链接 可 以 指 问 页面 中 的 
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内 容 ， 如 图 3.6.1 所 示 ， 也 可 以 指向 其 他 页 面 


或 资源 ,或 者 两 者 若 而 有 之 ,无论 是 哪 种 情况 ， 
应 该 仅 对 文档 中 重要 的 链接 群 使 用 nav。 





<body> 
<header role="banner"> 
<nav role="navigation"> 
<ul> 
<]1>《<a href="#gaudi">Barcelona's 
» Architect</a></1i> 
<li lang="es"><a href="#sagrada- 


» familia">La Sagrada Familiax</a> 
» </1i> 
<li>«a href="#park-guell">Park 
» Guell</a></1i> 
</ul> 
</nav> 
</header> 
</body> 
</html> 





3.6.1 这些 链 接 (a 元 素 ) 代 表 一 组 重要 的 导航 ， 
此 将 它们 放 入 一 个 nav 元 素 。iole 属性 并 不 是 必 
需 的 ， 不 过 它 可 以 提高 可 访问 性 。 更 多 有 关 向 nav 
应 用 role="navigation" 的 信息 参见 本 节 最 后 一 个 
提示 

如 果 你 仔细 看 过 上 一 节 的 代码 ， 束 已 经 
见识 过 nav 元 么 了。 下 面 将 那 一 段 代 码 搬 过 来 ， 
并 对 nav 进行 了 突出 显示 。nav 元 素 不 会 对 其 
内 容 添 加 任何 默认 样式 ， 如 图 3.6.2 所 示 。 











Antaoni Gaudi, Barceloena's architeet 
| | Antoni Gaudi, Barcelona's archit... 





a Barcelonas Architect 


+ Lasaprada Familia 
s Park Guell 





图 3.6.2 在 默认 情况 下 ， 我 们 的 导航 看 起 来 相当 
普通 。 那 些 圆 点 并 不 是 由 nav 元 素 产生 的 。 除 了 开 
启 一 个 新 行 以 外 ， 该 元 素 没 有 任何 默认 样式 。 显 示 
这 些 圆 点 是 因为 每 个 链接 都 包 在 一 个 1 元 素 ( 列 
表 项 ) 里 面 。 使 用 CSS 可 以 隐藏 这 些 圆 点 或 显示 
其 他 的 东西 ， 还 可 以 将 这 些 链接 水 平 显 示 ， 改 变 它 
们 的 颜色 ， 让 它们 看 起 来 像 按 钮 ， 等 等 。 本 书 将 从 
第 7 草 开 始 讲解 CSS 
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将 一 组 链接 指定 为 重要 导航 

(1) 输入 <nav>。 

(2) 输入 一 组 链接 并 将 其 标记 为 ul (无 序 
列表 ) 结构 ， 除 非 链接 的 顺序 比较 重要 ( 例 
如 面包 居 导 航 ) 。 如 果 链 接 顺 序 重要 ， 就 将 
其 标记 为 ol ( 有 序列 表 ) 结构 。 (要 了 解 链 
接 和 列表 ,分别 参见 第 6 章 和 第 15 蔓 。 ) 

(3) 输入 </nav>。 








BB 有 编写 HIML 或 XHTML 经 历 的 开 
发 人 员 或 许 已 经 习惯 了 使 用 Ul 或 0l 元 素 对 
链接 进行 结构 化 。 在 HTML5 中 ,， nav 并 没有 
取代 这 种 最 佳 实践 。 应 该 继续 使 用 这 些 元 素 ， 
只 是 在 它们 的 外 围 简单 地 包 上 一 个 nav (参见 
图 3.6.1 ) 。 


尽管 屏幕 阅读 器 整体 上 还 在 追赶 
HTMLS 新 出 现 的 语义 功能 ， 但 nav 能 帮助 它 
们 识别 页 面 的 主导 航 ， 并 允许 用 户 通过 键盘 
直接 跳 至 这 些 链接 。 这 可 以 提高 页 面 的 可 访 
问 性 ， 提 升 访问 者 的 体验 。 


深入 了 解 nav 


HTMLS 规范 不 推荐 对 辅助 性 的 页 脚 
链接 ( 如 “使 用 条 款 ”、“ 隐 私 政策 ”等 ) 
使 用 nav， 这 不 难 理解 。 不 过 ， 有 时 页 脚 会 
再 次 显示 顶级 全 局 导航 ,或 者 包含 “商店 位 
置 ”、“ 招 聘 信 息 ” 等 重要 链接 。 在 大 多 数 
情况 下 ， 我 们 推荐 将 页 脚 中 的 此 类 链接 放 入 
nav 中 。 


元 素 中 。 


HTMLS 不 允许 将 nav 明 套 在 address 


要 了 解 如 何在 nav 中 使 用 Tole= 
“navigation" (参见 图 3.6.1 ) , 请 参见 3.13 节 。 


上 文 提 到 ， 要 在 页 面 中 插入 一 组 链接 并 非 意 味 着 一 定 要 将 它们 包 在 nav 元 素 里 。 
设想 有 一 个 如 图 3.6.3 所 示 的 新 闻 页 面 。 这 是 一 篇 文章 的 Arts 人 & Entertainment 部 分 ， 是 
一 则 关于 菜 画 万 开业 的 短文 ,该 页 面包 含 四 个 链接 列表 ,其 中 只 有 两 个 列表 具有 足够 的 重要 性 ， 


可 以 包 在 nav 中 。 


(可 以 看 到 ， 这 里 省 略 了 部 分 代码 。 ) 


位 于 aside 中 的 次 级 导航 允许 用 户 跳 转 到 Arts 放 Entertainment 中 的 分 类 页 面 (如 
Movies、Music ) ， 因 此 它 构 成 了 页 面 的 一 个 主要 导航 区 块 。 不 过 ，Other Stories 这 个 aside 


则 不 是 ，footer 里 的 链接 也 不 是 。 


(> aside oA 人 W310 


那么 , 如何 判断 是 否 对 一 组 链接 使 用 nav 呢 ?归根 结 底 , 这 取决 于 内 容 的 组 织 情况 。 至 少 ， 
应 该 将 网 站 全 局 导航 ( 让 用 户 可 以 跳 至 网 站 各 个 主要 部 分 的 导航 ) 标 记 为 nav。 这 种 nav 通 常 (但 
并 不 总 是 ) 出 现在 页 面 级 的 header 元 素 里 面 (参见 3.5 节 ) 。 
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<body> 
《<1-- ==== 开始 页 面 级 页 眉 ==== --> 
<header role="banner"> 
<l== 站 点 标识 可 以 放 在 这 里 =-y 
《1-- 全 站 导航 --> 
<nav role="navigation"> 
<UL> ... </ul> 
</nav> 
</header> 


始 主要 内 容 ==== --> 
<main role="main"> 
<h1>Arts & Entertainment: Museums 
</h1> 


<|-- 三 三 三 三 


<article> 
<h2>Gallery Opening Features the 
Inspired, Inspiring</h2> 
《<p>..。 [故事 内 容 ] ... </p> 
</article> 


<aside> 
<h2>0ther Stories</h2> 
<!-- 没有 包含 在 nav 里 --> 
<ul> ..。 [故事 链接 ] ...。</ul> 
</aside> 
</main> 


《<1-- ==== 开始 附注 栏 
<aSslidey> 
<!-- 次 级 导航 --> 
<nav IOoJlLe= ' navigation > 
<ul> 
<l1i><a href="/arts/movies/"> 
Movies</a></1i> 
<l1i><a href="/arts/music/"> 
Music</a></1i> 


</ul> 
</nav> 
</aside> 


始 页 面 级 页 脚 ==== --> 
<footer role="contentinfo"> 
<!-- 辅助 性 链接 并 未 包 在 nav 中 --> 
<UL> ... </ul> 
</footeT> 
</body> 
</html> 


<|-- 三 三 三 三 








3.6.3 在 这 个 页 面 中 ,只 有 两 组 链接 放 在 nav 里 ， 
为 外 两 组 则 由 于 不 是 主要 的 导航 而 没有 放 在 nav 里 
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3.7 标记 页 面 的 主要 区 域 


大 多 数 网 页 都 有 一 些 不 同 的 区 块 ， 如 页 
眉 、 页 脚 、 包 含 额 外 信息 的 附注 栏 、 指 癌 其 
他 网 站 的 链接 ， 等 等 。 不 过 ， 一 个 页 面具 有 
一 个 部 分 代表 其 主要 内 容 。 可 以 将 这 样 的 内 
容 包 在 main 元 素 中 ， 该 元 素 在 一 个 页 面 仅 使 
用 一 次 (参见 图 3.7.1 和 图 3.7.2 ) 。 


<body> 
<header role="banner"> 
<nav role="navigation"> 
。 [包含 多 个 链接 的 Ul] .…. 
</nNav> 
</header> 


<main role="main"> 
<article> 
<h1 id="gaudi">Barcelona's Architect 
</h1> 
<p>Antoni Gaudi's incredible 
buildings bring millions ...</p> 


。 [页 面 主 要 区 域 的 其 他 内 容 |] ... 
</articley> 
</main> 


<aside role="complementary'"> 
<h1i>Architectural Wonders of Barcelona 
</h1> 


。[ 附 注 栏 的 其 他 内 容 ] ... 
</asidey> 


<footer role="contentinfo"> 
。[ 版 权 ] ... 

</footeT> 

</body> 

</html> 














3.7.1 这 是 本 章 反 复 使 用 的 页 面 的 完整 代码 的 
主体 结构 。 你 可 能 还 不 熟悉 其 中 某 些 元 素 ， 不 过 随 
后 就 会 讲 到 。main 元 素 包围 着 代表 页 面 主题 的 内 容 。 
最 好 在 main 开始 标签 中 加 上 role="main" (参见 最 
后 一 条 提示 ) 














有 main 元 素 是 HTMLS 新 添加 的 元 素 。 
记 住 ， 在 一 个 页 面 里 仅 使 用 一 次 。 
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BARCELONA'S ARCHITECT 


Anteel QUacd incrodbie buildings bring rilliosss of tourins 10 
Barcelcea cach year 


Gaodis nom-confoemity, sesdy visible in his tsernage years, 
road with kis qrt bet firm dvotiom 9 the church made a 
WE Soundariee tor bes 中 ou and Meas Hi wear fie 
simplicity, based on his careful observations of nature, is Quite 
ppareat in hs work, trom tbe Purs 《ell and es Ineredibie 
sculpeares and mosales, to the Chorch of the Sacred Familiy and 
Hs oganie, bulboms {owers 


LA SAGRADA FAMILIA 


The complicasedly sarned snd cursowsly wnfirished 
masterpieee that is the Ruplanory Tempie of the 
Sacred Family BB the most visitied buillding in 
Bsroeloea. [nm 8 Gasddi combines bis vision of pature 
md srchectuse wah hi devotion to hi ith. The Sugrsds 
Famllin wtireets even the mon-religious to Rs doors In larRe part 
dee Wo ls tragje wory wnd its ti unfinished seate, of which Whe 
everpewanes scaffolding and cranes erv perrmanens recsiryderh 


PARK GUELL 


The Park Ouell sbwuys remand me of Howasd 

Noesk 加 Am Rands The Fruntaimhend 

Goudy project in the Pet Goel was to bulld a 
residentia]) community whose residents would love where they 
jhed 上 was nevee Smshed 


Perhape that bs for the be sinee pow we all pet ro enjoy it. The 
Park Guell ls set on a hil] overlooking pauertically al of Bareccloma 
ls beawtiful apd even comfortisble serpentine bench is filled wh 
forvigners and ocals alike every day of the work. lb romaic lizartdis 
have become synonymoas with the cy Nselt 





图 3.7.2 同 p、header、footer 等 元 素 一 样 ，main 
元 系 的 内 容 显 示 在 新 的 一 行 ， 除 此 之 外 不 会 影响 页 
面 的 任何 样式 。 (这 里 显示 的 布局 并 不 是 由 main 
产生 的 ， 而 是 由 CSS 控制 的 。) 这 里 为 了 方便 你 
在 应 用 了 样式 的 完整 页 面 中 识别 出 main， 特 意 为 
其 添加 了 蓝 色 的 边框 








如 果 创 建 的 是 Web 应 用 ， 则 使 用 
main 包围 其 主要 的 功能 。 


不 能 将 main 放置 在 article、aside、 
footer、header 或 nav 元 素 中 。 


如 图 3.7.1 所 示 ，role="main" 可 以 帮 
助 屏 幕 阅读 器 定位 页 面 的 主要 区 域 。 要 进 一 
步 了 解 这 样 的 ARIA 地 标 ， 参 见 3.13 节 。 


3.8 创建 文章 


HTMLS 的 男 一 个 新 元 素 便 是 article， 如 
图 3.8.1 和 图 3.8.2 所 示 。 你 已 经 见 过 一 些 用 到 








该 元 系 的 示例 。 现 在 ， 让 我 们 深入 了 解 一 下 它 
的 作用 。 


<body> 
<header role="banner"> 
<nav role="navigation"> 
。 [包含 多 个 链接 的 Ul] ... 
</navy> 
</header> 


<main Tole= main > 
<article> 
<h1 id="gaudi">Barcelona's Architect 
> </h1> 


<p>Antoni Gaudi's incredible buildings 
个 bring millions of tourists to 
个 Barcelona each year.</p> 


<p>Gaudi's non-conformity, already 

> visible in his teenage years, 

个 Coupled with his quiet but firm 

> devotion to the church, made a 
Unique foundation for his thoughts 


and ideas. His search for simplicity 
一 .ls quite apparent in his work, 

个 ffrom the <a href="#park-guell">Park 
> Guell</a> and its incredible 

个 SCULptures and mosaics, to...</p> 


<h2 id="sagrada-familia" lang="es"> 
个 La Sagrada Familia</h2> 


<p><Iimg src="img/towers.jpg" 

— width="75" height="100" alt="Sagrada 
> Familia Towers" /> The 

—* complicatedly named and curiously 
— unfinished masterpiece...</p> 


<h2 id="park-guell">Park Guell</h2> 


.… [图 像 和 段落 | ... 
</article> 
</main> 
</body> 
</html> 








图 3.8.1 为 了 精简 ， 我 对 文章 内 容 进 行 了 缩写 ， 
略 去 了 与 上 一 节 相 同 的 nav 代码 。 可 以 在 本 书 
网 站 查看 完整 的 代码 (www.htmlcssvqs.comy/8ed/ 
structure-final ) 。 尽 管 在 这 个 例子 里 只 有 段落 和 图 
像 ， 但 article 可 以 包含 各 种 类 型 的 内 容 
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全 生僻 Antoni Gaudi Barcelona's architect 


: Antoni Gaudi, Barcelona's archit... 


。 Barcelona's Architect 


。 La Saprada Familia 
。s Park Guell 


Barcelona's Architect 


Antoni Gaudi's incredible buildings bring millions of tourists 
to Barcelona each year. 


Gaudf's non-conformity, already visible in his teenape years, 
coupled with his guiet but firm devyotion to the church, made a 
unigue foundation for his thoughts and ideas. His search for 
simplicity, based on his careful observations of nature, is quite 
apparent in his work, from the Park Guel] and its incredible 
sculptures and mosaics, to the Church of the Sacred Family 
and its organic, bulbous towers. 


La Sagrada Familia 


The complicatedly named and curiously 
unfinished masterpiece that is the Expiatory Temple of the 
Sacred Family is the most visited building in Barcelona. In it, 
Gaudi combines his vision of nature and architecture with his 
devotion to his faith. The Sagrada Familia attracts even the 
non-religious to its doors in large part due to its tragic story 
and its stil] unfinished state, of which the everpresent 
scaffolding and cranes are permanent reminders. 


Park Guell 





The Park Guell always reminds me of 
i Sun Ron's Tho Fy Jnhone 311P 





3.8.2 ” 现在， 页 面 有 了 header、nav、main 和 
article 元 率 ， 以 及 它们 各 目的 内 容 。 在 不 同 的 浏 
览 句 中 ，article 中 标题 的 字号 可 能 不 同 。 可 以 应 
用 CSS 使 它们 在 不 同 的 浏览 磺 中 显示 相同 的 大 小 
(参见 第 10 章 ) 


根据 其 称 ， 你 大 概 会 猜想 article 用 于 包 
含 像 报纸 文章 一 样 的 内 容 。 不 过 ，article 并 
不 局 限于 此 。 在 HTML5 中 , “文章 ”( article ) 
并 非 这 个 词 本 来 的 意思 。 
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HTMLS 对 该 元 素 的 定义 如 下 : 

article 元 素 表 示 文 档 、 页 面 、 

应 用 或 网 站 中 一 个 独立 的 容器 ， 原 

则 上 是 可 独立 分 配 或 可 再 用 的 ， 就 

像 聚 合 内 容 中 的 各 部 分 。 它 可 以 是 

一 篇 论坛 帖子 、 一 篇 杂志 或 报纸 文 

章 、 一 篇 博客 条 目 、 一 则 用 户 提交 

的 和 评论、 一 个 交互 式 的 小 部 件 或 小 

工具 , 或 者 任何 其 他 独立 的 内 容 项 。 

其 他 article 的 例子 包括 电影 或 音乐 评 
论 、 和 案例 研究 、 产 品 描述 ， 等 等 。 你 或 许 居 
讶 于 它 还 可 以 是 交互 式 的 小 部 件 或 小 工具 ， 
不 过 这 些 确 实 是 独立 的 、 可 再 分 配 的 内 容 项 。 


创建 文章 的 步骤 

(1) 输入 xarticle>。 

(2) 输入 文 草 的 内 容 。 内 容 可 以 包含 任意 
数量 的 元 系 。 元 系 类 型 包括 段落 、 列 表 、 音 频 、 
视频 、 图 像 、 图 形 等 。 








(3) 输入 </article>。 
可 以 将 article 谱 套 在 另 一 个 article 


中 ， 只 要 里 面 的 article 与 外 面 的 article 是 
部 分 与 整体 的 关系 。 下 文 提供 了 这 样 的 一 个 
Bs 


一 个 页 面 可 以 有 多 个 article 元 素 

(也 可 以 没有 ) 。 例如， 博客 的 主页 通常 包 
括 几 篇 最 新 的 文章 ， 其 中 每 一 篇 都 是 其 自身 
的 article。 


人 
section 元 素 ( 下 一 节 会 介绍 该 元 素 ) 。 在 
article 里 包含 独立 的 hi ~ h6 也 是 很 好 的 做 
法 ， 就 像 示 例 代 码 那 样 。 
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中 artiele ef 人 


图 3.8.1 中 的 示例 只 是 使 用 article 的 一 种 方式 ， 下 面 看 看 其 他 的 用 法 。 

图 3.8.3 展示 了 对 基本 的 新 闻 报 道 或 报告 进行 标记 的 方法 。 注 意 footer 和 address 元 素 
的 使 用 (对 它们 的 讨论 分 别 参 见 本 章 和 第 4 齐 ) 。 这 里 , address 只 应 用 于 其 父 元 素 article( 即 
这 里 显示 的 article ) ,而 非 整 个 页 面 或 任何 诺 套 在 那个 article 里 面 的 article ( 如 图 3.8.4 
人 

罗 53587X4E 个 7 了 人 人 人 7 于 article 四 全 的 drticle 元 二 2 例 中 以 全 0 drticle 昂首 
户 提交 的 评论 ， 就 像 你 在 博客 或 新 闻 网 站 上 见 到 的 评论 部 分 。 该 例 还 显示 了 section 元 素 ( 参 
e300) tinerC (E47 的 用 法 


aT LAO 


<article> 
<h1>The Diversity of Papua New Guinea 
</h1> 
<p>Papua New Guinea is home to more than 
800 tribes and languages ...</p> 


<!-- 文章 的 页 脚 , 并 非 页 面 级 的 页 脚 --> 
<footer> 
<p>Leandra Allen is a freelance 
journalist who earned her degree 
in anthropology from the University 
of Copenhagen.</p> 


<address> 
You may reach her at «a href="mailto: 
leandra@therunningwriter.com"> 
leandra@therunningwriter.com</a>. 
</address> 
</footer> 
</article> 


图 3.8.3 标记 包含 作者 信息 的 文章 的 常见 方式 


<article> 
<h1>The Diversity of Papua New Guinea 
</h1> 
。[ 父 元 素 article 内 容 ] ... 


<footer> 
。[ 父 元 素 article 页 脚 | ... 
</footeTy> 


<section> 
<h2>Reader Comments</h2> 
<article> 
<footer>travelgal wrote on 
<time datetime="2014-02-26"> 
February 26, 2014</time>: 
</footer> 
<p>Great article! I've always 
been curious about Papua New 
Guinea.</p> 
</article> 


<article> 
we [下 一 则 读者 评论 ] vs。 
</article> 
</section> 
</article> 





3.8.4 ”每 条 读者 评论 都 包含 在 一 个 article 
里 ， 这 些 article 元 素 则 舰 套 在 主 article 里 
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3.9 定义 区 块 


另 一 个 HIMLS 的 新 元 系 是 section， 参 
见 图 3.9.1 至 图 3.9.3。HTMLS5 对 该 元 素 的 部 
分 定义 如 下 : 
section 元 素 代 表 文 档 或 应 用 的 
一 个 一 般 的 区 块 。 在 这 里 ， 
是 具有 相似 主题 的 一 组 内 容 ， 通 常 
包含 一 个 标题 。 
section 的 例子 包 
式 对 话 框 中 的 各 种 标签 页 
带 编 号 的 区 块 。 比 如 网 站 的 主页 可 
以 分 成 介绍 、 新 闻 条 目 、 联 系 信息 
等 区 块 。 
尽管 我 们 将 section 定义 成 “通用 的 ”区 
块 , 但 不 要 将 它 与 div 元素 (参见 3.12 市 ) 混 消 。 
从 语义 上 讲 ，section 标记 的 是 页 面 中 的 特定 
区 域 ， 而 div 则 不 传达 任何 语义 。 


section 


<body> 


<main role="main"> 
<h1>Latest World News</h1> 
<section> 
<h2>Breaking News</h2> 
<Ul>..。[ 标 题 列表 |] .../ul> 
</section> 


<section> 
<h2>Business</h2> 
<UL>..。 [标题 列表 ] .../ul> 
</section> 


<section> 
<h2>Arts</h2> 
<Ul>..。[ 标 题 列表 | .…. 
</section> 
</main> 


</body> 
</html> 





图 3.9.1 几乎 任何 新 闻 网 站 都 会 对 新 闻 进行 分 类 。 
每 个 类 别 都 可 以 标记 为 一 个 section 
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<h1>Graduation Program</h1> 
<section> 
<h2>Ceremony</h2> 
<01> 
<li>0pening Procession</1i> 
<li>Speech by Valedictorian</1i> 
<li>Speech by Class President</1i> 


</01> 


</section> 


<section> 
<h2>Graduates (alphabetical)</h2> 
<01> 
<li>Molly Carpenter</1i> 


</01> 
</section> 





3.9.2 ”这 个 例子 是 在 HTML5 规范 中 一 个 例子 
的 基础 上 修改 而 成 的 ， 其 中 ，section 元 又 用 于 标 
记 一 次 毕业 活动 安排 中 的 不 同 部 分 





Defining a Section 


Defininmg a Section 
Graduation Program 


Ceremony 


l. Opening Procession 

2. Speech by Valedictorian 

3, Speech by Class President 

4, Presentation of Diplomas 

5, Closing Speech by Headmaster 


Graduates (alphabetical) 


1. Molly Carpenter 
2, Anastasia Luccio 
3. Ebenezar Mctovy 
4, Karrin Murphy 
[hnanrn Lmifh 





图 3.9.3 ” 跟 本 童 很 多 其 他 的 元 系 一 样 ，section a 

不 影响 页 面 的 显示 。 这 里 用 数字 编号 展示 各 个 条 
0 3.9.2 中 使 用 了 有 序列 表 (ol ) 。 0 
参见 第 15 章 
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46 “第 3 章 基本 HTML 结构 
定义 区 块 的 步骤 

(1) 输入 <section>。 

(2) 输入 区 块 的 内 容 。 内 容 可 以 包含 任意 
数量 的 元 素 。 元 素 类 型 包括 段落 、 列 表 、 音 频 、 
视频 、 图 像 、 图 形 等 。 

(3) 输入 </sectiony 。 


如 果 只 是 出 于 添加 样式 的 原因 要 对 内 
容 添 加 一 个 容器 ， 应 使 用 div 而 不 是 section。 








体会 section 元 素 


可 以 将 section 诅 套 在 article 里 ， 
从 而 显 式 地 标 出 报告 、 故 事 、 手 册 等 文章 的 
不 同 部 分 或 不 同 章节 。 例如， 可 以 在 本 章 所 
示 Antoni Gaudf 的 例子 中 使 用 section 元 素 ， 
即使 用 一 个 section 包围 La Sagrada Familia 
这 个 h2 及 相关 的 段落 ， 用 另 一 个 section 包 
围 Park Guell 这 个 h2 及 相关 的 段落 。 


我 特意 引用 了 HTMLS5 对 section 的 定义 ， 以 便 你 对 该 元 素 有 个 最 为 直观 的 理解 。 
section 元 素 可 能 是 Web 社区 讨论 最 激烈 的 主题 ， 因 为 似乎 很 难 解释 清楚 它 的 用 法 。 

在 考虑 何 时 使 用 section 的 时 候 ， 记 住 定义 中 “具有 相似 主题 的 一 组 内 容 ” 这 一 条 是 
很 有 帮助 的 。 这 也 是 section 区 别 于 div 的 另 一 个 原因 。section 和 article 的 区 别 在 于 ， 
section 在 本 质 上 组 织 性 和 结构 性 更 强 ， 而 article 代表 的 是 自 包 含 的 容器 。 

正如 在 第 1 章 中 提 到 的 ， 对 内 容 进 行 标 记 时 ， 并 非 总 能 分 出 对 和 错 ， 只 是 大 多 数 时 候 有 
正确 的 选择 。 而 其 他 时 候 ， 就 只 能 依靠 个 人 对 最 适合 描述 内 容 的 HIML 元 素 的 感 党 了 。 

在 考虑 是 否 使 用 section 的 时 候 ， 一 定 要 仔细 思考 ， 不 过 也 不 必 每 次 都 对 是 否 用 对 感到 
担心 。 有 时 ， 些 许 主 观 并 不 会 影响 页 面 正 常 工作。 而 有 全 ， 也 不 会 有 人 半夜 来 圾 你 的 门 。 


0 


3.10 ”指定 附注 栏 


有 了 时候， 页 面 中 有 一 部 分 内 容 与 主体 内 
容 相 关 性 没有 那么 强 , 但 可 以 独立 存在 ( 参 
见 图 3.10.1 和 图 3.10.2 ) ， 如 何在 语义 上 表示 
出 来 呢 ? 

在 HTML5 之 前 一 直 无 法 显 式 地 做 到 这 一 
点 。 在 HIML5 中 ， 我 们 有 了 aside 元 率 。 


不 过 这 只 是 因为 外 面 很 黑 ， 


NT 


使 用 aside 的 例子 还 包括 重要 引述 、 侧 
栏 (图 3.10.3 )、 指 回 相 关 文 章 的 一 组 链接 ( 通 
常 针对 新 闻 网 站 ) 、 广 告 、nav 元 素 组 〈 如 博 
客 的 友情 链接 ) , Twitter 源 、 相 关 产 品 列表 ( 通 
党 针对 电子 商务 网 站 ) ， 等 等 。 

忌 管 我 们 很 容易 将 aside 元 素 看 做 侧 栏 ， 
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但 该 元 素 其 实 可 以 用 在 页 面 的 很 多 地 方 ,， 具 “ 则 其 中 的 内 容 应 与 其 所 在 的 内 容 密 切 相 关 ， 
体 依 上 下 文 而 定 。 如 果 aside 舱 套 在 页 面 主 要 而 不 是 仅 与 页 面 整体 内 容 相 关 。“ 其 他 aside 
内 容 内 (而 不 是 作为 侧 栏 位 于 主要 内 容 之 外 ) ， 的 例子 ”中 的 例 1 就 是 这 样 的 。 


<body> 
<header role="banner"> 
<nav role="navigation"> 
。， [包含 多 个 链接 的 Ul] .…. 
</navy> 
</header> 


<main role="main"> 
<article> 
<h1 id="gaudi">Barcelona's Architect</h1> 


。 [文章 的 其 他 部 分 ] ... 
</articley> 
</main> 


<aside role="complementary"> 
<h1>Architectural Wonders of Barcelona</h1> 


<p>Barcelona is home to many architectural wonders in addition to Gaudi's work. Some of them include:</p> 
<ul> 

<]1 lang= es >Arc de Triomf</1i> 

《Li>The cathedral <span lang="es">(La Seu)</span></1i> 

<li lang= es >QTan Teatre del Liceu</1i> 

《Li lang="es'">Pavilion Mies van der Rohe</1i> 

<1li lang="es'">Santa Maria del Mar</1i> 
</ul> 


<p><small>Credit: «a href="http://www.barcelona.de/en/barcelona-architecture-buildings.html" 
rel="external"><cite>Barcelona.de</cite></a>.</small></p> 
</aside> 
</body> 
</html> 








3.10.1 这 个 aside 是 有 关 巴 塞 罗 那 建筑 奇迹 的 信息 ,与 页 面 主要 关注 的 Antoni Gaudi 内 容 相 关 性 
稍 差 ， 且 可 以 在 没有 这 个 上 下 文 的 情况 下 独立 存在 。 我 可 以 将 它 般 套 在 article 里 面 ， 因 为 它们 是 相 
关 的 ， 但 最 终 我 将 它 放 在 了 article 后 面 ， 使 用 CSS 让 它 看 起 来 像 侧 栏 (图 3.10.3) 。aside 里 面 的 
role="complementary" 是 可 选 的 ， 但 它 可 以 提高 可 访问 性 。 要 了 解 更 多 信息 ， 参 见 最 后 一 条 提示 
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有 AQ Antoni Gaudi Barcelona's architect 


] Antoni Gaudi, Barcelona's archit... 十 | 
SOL Y AD LS SUL UNNNISUCY SI UI WIUCH 


scaffolding and cranes are permanent reminders. 


Park Guell 


The Park Guell always reminds me of 
Howard Roark in Ayn Rand's The Fountainhead. Gaudfs 
project in the Park Guell was to build a residential 
community whose residents would love where they lived. It 
Was never finished. 


Perhaps that is for the best, since now we ai get to enjoy it. 
The Park Guell is set on a hill overlooking practically all of 
Barcelona. Its beautiful and eyen comfortable serpentine 
bench is filled with foreigners and locals alike every day of 
the week. Its mosaic lizards have become synonymous with 
the city itself. 


Architectural Wonders of Barcelona 


Barcelona is home to many architectural wonders in addition 
to Gaudfs work. Some of them include: 


es。 Arc de Triomf 

。 The cathedral (La Seu) 

» Gran Teatre del Liceu 

»。 Pavilion Mies van der Rohe 
» Santa Maria del Mar 


Credit: Barcelona.de. 








图 3.10.2 aside 出 现在 文章 的 下 面 ， 因 为 在 
HTML 中 aside 就 跟 在 article 的 后 面 ， 参见 
图 3.10.1。 可 以 看 到 ， 浏 览 融 在 默认 情况 下 并 未 对 
aside 应 用 任何 特殊 样式 (除了 从 新 行 开始 )。 不 过 
可 以 通过 CSS 控制 其 外 观 显 示 (图 3.10.3 ) 





指定 附注 栏 的 步骤 

(1) 输入 <aside>。 

(2) 输入 附注 栏 的 内 容 。 内 容 可 以 包含 任 
意 数 量 的 元 系 。 元 系 类 型 包括 段落 、 列 表 、 
音频 、 视 频 、 图 像 、 图 形 等 。 
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BARCELONA'S ARCHITECT 


Anmioei QavdTs incredibie buibdings bring reaDions of tourists to 
Barcelona each year 


Gaodfs pon-conformity, already visible im his teenage years, 
coupled wah hs quiet but firm Gevotion 40 the chorch, made $ 
uniqgee fundtion for his thoughts and Wdeas Hi search or 
simpieity, based on his carefil observations of mature, quie 
wparent in his work, from the Park Guel) and js incredible 
sculyrures and mosalcs, to the Church of the Sacred Fnmyly asd 
Hs oepanic, bulbous lowert. 


LA SAGRADA FAMILIA 


The coenplicatedly mamed amd curiously unfimeshed 
masterpioon tbat i the Epistory Tomple of the 
Sacred Fumily BB the mo visited bailding in 
Barceions. Jn it, Qavdi combines his visioe of pature 





wd archaecture with his devotim ww his fitbh, The Sunerads 


3.10.3 对 已 完成 的 页 面 应 用 CSS 时 ， 可 以 让 
aside (以 Architectural Wonders of Barcelona 开头 ) 

显示 在 主要 内 容 的 旁边 ， 而 不 是 下 边 。 这 个 例子 已 
将 aside 做 成 了 侧 栏 〈 我 们 将 在 第 11 音 学 习 如 何 
制作 两 栏 的 布局 ) 


(3) 输入 </aside>。 
在 HTML 中 ， 应 该 将 附注 栏 内 容 放 


在 main 的 内 容 之 后 (图 3.10.1) 。 出 于 SEO 
和 可 访问 1 目的 ， 最 好 将 重要 的 内 容 放 在 


前 面 。 可 以 通过 CSS 改变 它们 在 浏览 器 中 的 
显示 顺序 。 
对 于 与 内 容 有 关 的 图 像 ( 如 图 表 、 图 


形 或 芝 有 说 明文 守 的 插图) 
见 第 4 章 ) 而 非 aside。 


使 用 figure ( 参 


元 订 内 3 


HTMLS 不 允许 将 aside 左 套 在 address 


要 了 解 如 何在 aside 中 使 用 Tole= 
"complementary"， 参 见 3.13 节 。 
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其 他 aside 的 例子 
上 面 提 到 ，aside 可 以 能 套 在 主要 内 容 里 面 ， 也 可 以 位 于 主要 内 容 外 面 。 
例 1 家 套 在 主要 内 容 中 )》 


<body> 
<main role="main"> 
《airticley> 
<h1>The Diversity of Papua New Guinea</h1> 
滞 攻 由 二 
<aside> 





<h2>Papua New Guinea Quick Facts</h2> 
<ul> 
<li>The country has 38 of the 43 known birds of paradise</1i> 


<li>Though quite tropical in some regions, others occasionally 
experience snowfall.</1i> 


</ul> 
</aside> 
| 
</article> 

</main> 

</body> 

</html> 

如 果 这 个 article 要 包含 一 个 重要 引述 ,也 应 该 包 在 aside 里 。 也 可 以 弄 一 个 “相关 故事 ” 
的 aside， 和 包含 一 组 指向 关于 该 国家 的 其 他 文章 的 链接 。 另 外 ，aside 还 可 以 成 为 页 面 的 另 一 
个 区 块 ， 而 不 是 能 套 在 main 中 的 article 里 。 

我 们 已 看 到 了 aside 位 于 附注 栏 的 例子 (图 3.10.1 和 图 3.10.3 ) 。 现 在 ， 考 处 一 套 设计 
作品 或 一 组 案例 研究 ， 其 中 每 个 HIML 页 面 展示 一 个 项 目 ， 并 在 毗邻 的 一 栏 中 《显示 位 置 由 
CSS 控制 ， 而 不 是 由 例 2 中 的 代码 控制 ) 提供 指向 其 他 项 目 页 面 的 链接 ( 谱 套 在 nav 中 )， 

例 2 (aside 并 未 藤 套 在 主要 内 容 中 ， 且 包含 一 个 nav) 


<body> 
<main role="main"> 
<¢article> 
<ha> = 项目 7 | </h4S 
<figure> [7 |</figure> 
< > 报关 本本 本 < 人 > 
</articley> 
</main> 
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基本 HTML 结构 


<1=- 这 个 附注 栏 没 有 详 套 在 主要 内 容 中 -=-> 
<aside> 


<h2>0ther Projects</h2> 


<li><a href="habitat-for-humanity.htm]l">Habitat for Humanity 


<li><a href="royal-philharmonic.htm]l">Royal Philharmonic Orchestra 


<《navV> 
<ul> 
brochure</a></1i> 
website</a></1i> 
</ul> 
</nav> 
</aside> 
</body> 
</html> 
这 个 aside 位 于 article 的 外 面 ， 因 为 它 与 页 
性 没 那 么 强 
3.11 创建 页 脚 


当 你 想到 页 脚 的 时 候 ， 你 大 概 想 的 是 页 
面 底 部 的 页 脚 (通常 包括 版 权 声 明 ， 可 能 还 
包括 指 癌 隐私 政策 页 面 的 链接 以 及 其 他 类 似 
的 内 容 ) 。HTMLS 的 footer 元 又 可 以 用 在 
这 样 的 地 方 ， 但 它 同 header 一 样 ， 还 可 以 用 
在 其 他 的 地 方 。 

footer 元 素 代 表 般 僚 它 的 最 近 的 article、 
aside、 blockquote、body、details、 
fieldset、figure、nav、section 或 td 元 素 
的 页 脚 。 只 有 当 它 最 近 的 祖先 是 body 时 ， 
它 才 是 整个 页 面 的 页 脚 ( 参见 图 3.11.1 和 
图 3.11.2 ) 。 

如 入 一 个 footer 包 看 它 所 在 区 块 〈 如 一 
个 article ) 的 所 有 内 容 ， 它 代表 的 是 像 附录 、 
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面 整体 内 容 相 关 ， 但 与 article 的 内 容 相 关 


索引 、 版 权 页 、 许 可 协议 这 样 的 内 容 。 


创建 页 脚 的 步骤 

(1) 将 光标 放 在 希望 创建 页 脚 的 元 又 里 。 
(2) 输入 <footer>。 

(3) 输入 页 脚 的 内 容 。 

(4) 输入 </footer>。 


页 脚 通常 包含 关于 它 所 在 区 块 的 信 
息 ， es 版 权 信 息 、 作 
者 及 其 他 类 似 条 目 。 参 见 “ 其 他 footer 示例 ” 
中 的 前 两 个 例子 。 
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<body> 
<header role="banner"> 
<nav role="navigation"> 
，[ 包 含 链 接 的 无 序列 表 ] ... 
</navy> 
</header> 


<main role="main"> 
<article> 
<h1 id="gaudi">Barcelona's Architect 
» </h1> 
， [文章 的 其 他 部 分 ].…. 


<h2 id="sagrada-familia" lang="es"> 
"La Sagrada Familiax</h2> 
…， [图像 和 段落 ] .…. 


<h2 1d= park-guel] >Park Guell</h2> 
[其 他 图 像 和 段落 ] .…. 
</article> 
</main> 


<aside role="complementary'"> 
<h1i>Architectural Wonders of Barcelona 
» </h1> 
。 [附注 栏 的 其 他 部 分 ] ... 
</aside> 


<footer> 
<p><small>&copy; Copyright All About 
» Gaudi</small></p> 
</footer> 
</body> 
</html> 





3.11.1 这 个 footer 代表 整个 页 面 的 页 脚 ， 
为 它 最 近 的 祖先 是 body 元素。 现在， 页面 有 了 
header、nav、main、article、aside 和 footer 元 素 。 
并 非 每 个 页 面 都 需要 以 上 所 有 元 素 ， 但 它们 确实 代 
表 了 HTML 中 的 主要 页 面 构成 要 素 














不 能 在 footer 里 误 套 header 或 另 一 
个 footer。 同时， 也 不 能 将 footer 误 套 在 
header 或 , address 元 素 里 。 





the city itself, 


Architectural Wonders of Barcelona 


Barcelona is home to many architectural wonders in addition 
to Gaudfs work. Some of them include: 


» Arc de Triomf 

» The cathedral (La Seu) 

。 Gran Teatre del Liceu 

es。 Pavilion Mies van der Rohe 
。 Santa Maria del Mar 


Credit: Barcelona.de. 


总 Copyright All About Gaudi 








图 3.11.2 ”这 个 footer 出 现在 页 面 的 最 底部 ， 位 
于 aside 之 后 。footer 元 系 本 刁 不 会 为 文本 添加 任 
何 默认 样式 。 这 里 ， 版 权 信息 的 字号 比 普通 文本 的 
小 ， 这 是 因为 它 艇 套 在 “用 来 对 法 律 文本 进行 语义 
化 ”的 small 元 又 里 (参见 第 4 草 ) 。 像 其 他 内 容 
一 样 ， 可 以 通过 CSS 修改 footer 元 素 所 含 内 容 的 
字号 














要 了 解 footer 如 何 取代 HTMLS5 之 前 
版 本 中 div 元 素 的 一 个 功能 ， 参 见 3.12 节 。 


要 了 解 在 哪 种 情况 下 可 对 页 面 级 的 
footer 使 用 Tole="contentinfo"， 参 见 3.13 
节 。 将 其 放 入 图 3.11.1 中 的 代码 是 合理 的 ， 
因为 它 代 表 的 是 整个 页 面 的 页 脚 ， 不 过 我 有 
意 略 去 了 ， 避 免 给 读者 留 下 所 有 footer 元 素 
都 需要 IrIole="contentinfo" 的 印象 。 在 “其 
他 footer 示例 ”中 ， 我 们 在 不 同 的 示例 中 体 
现 了 这 种 区 别 ， 另 外 还 演示 了 使 用 Tole 属性 
的 正确 方法 。 
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其 他 footer 示例 


我 们 已 经 学 习 了 页 面 级 footer 的 一 个 小 例子 (图 3.11.1 和 图 3.11.2) 。 图 3.11.3 是 另 一 
个 页 面 级 footer 的 例子 ， 不 过 其 中 的 内 容 更 多 一 些 。 

图 3.11.4 展示 了 位 于 页 面 区 块 article 中 的 一 个 footer， 以 及 作为 整个 页 面 页 脚 的 另 一 
A footer (x addrese A TI/ ticle Ts) 

注意 只 有 页 面 级 页 脚 有 role="contentinfo"。 参 见 3.13 节 了 解 此 功能 。 


<body> 
。 [包含 全 局 导航 的 页 面 级 页 刷 ] .…. 
。 [页面 内 容 ] ... 


《1-- 这 是 一 个 页 面 级 的 页 脚 , 因为 它 最 近 的 祖先 元 素 
是 body --> 
<footer role="contentinfo"> 
<p><small>&copy; Copyright 2014 The 
Corporation, Inc.</small></p> 


<ul> 
<l1li><a href="terms-of-use.html"> 
Terms of Use</a></1i> 
<1Li><a href="privacy-policy.html"> 
Privacy Policy</a></1i> 
</ul> 
</footer> 
</body> 
</html> 


<body> 


<¢article> 
<h1>..。 [文章 标题 ] ...</h1> 
ps | 文宣 内 容 ] </p> 


<!-- 文章 的 页 脚 --> 
<footer> 
<p>Leandra Allen is a freelance 
journalist who earned her 
degree in anthropology from the 
University of Copenhagen.</p> 
<address> 
You may reach her at 
<a href="mailto:leandra@ 
therunningwriter.com"> 
leandra@therunningwriter.com 
</a>. 
</address> 
</footer> 
</article> 


<1-- 页 面 级 页 脚 --> 

<footer role="contentinfo"> 
。 [版权 信 息 等 ] ... 

</footer> 

</body> 

</html> 





3.11.3 页面 级 的 footer 通常 包含 版 权 信息 以 3.11.4 第 一 个 footer 包 合 在 article 内 ， 

及 不 属于 页 面 全 局 导航 ( 位 于 header 里 ) 的 一 些 因此 是 属于 该 article 的 页 脚 。 第 二 个 footer 

链接 是 页 面 级 的 。 只 能 对 页 面 级 的 footer 使 用 
role="contentinfo"， 且 一 个 页 面 只 能 使 用 一 次 
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3.12 创建 通用 容器 


有 时 需要 在 一 段 内 容 外 围 包 一 个 容 右 ， 
从 而 可 以 为 其 应 用 CSS 样式 或 JavaScript 效 
果 。 如 果 没 有 这 个 容 问 ， 页 面 就 会 不 一 样 ( 参 
见 图 3.12.1 ) 。 在 评 佑 内容 的 时 候 ， 考 虑 使 用 
article、section、aside、nav 等 元 杂 ， 却 发 
现 它们 从 语义 上 讲 都 不 合适 。 

这 时 ， 你 真正 需要 的 是 一 个 通用 容 需 ， 
一 个 完全 没有 任何 语义 含义 的 容器 。 这 个 容 
髓 就 是 div (来 自 division 一 词 ) 元 素 ， 如 
图 3.12.2 所 示 。 有 了 div， 就 可 以 为 其 添加 样 
式 (参见 图 3.12.3 ) 或 JavaScript 效果 了 。 一 
定 要 阅读 补充 材料 “有 关 div 的 一 些 历 史 以 
及 何 时 在 HTMLS 中 使 用 它 ”， 了 解 什么 时 候 
可 以 在 页 面 中 使 用 div。 
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图 3.12.2 


<body> 
<div> 
<header role="banner"> 
<nav role="navigation"> 
。 [包含 多 个 链接 的 无 序列 表 ] ..， 
</navy> 
</header> 


<main role="main"> 
<article> 
<h1 id="gaudi">Barcelona's 
» Architect</h1> 
。 [文章 的 其 余 内 容 ] ... 


<h2 id="sagrada-familia" lang="es"> 
”La Sagrada Familia</h2> 
… [图像 和 段落 ] .…. 


<h2 id="park-guell">Park Guell</h2> 
。 [ 另 一 个 图 像 和 段落 ] .…. 
</article> 
</main> 


<aside role="complementary'"> 
<h1>Architectural Wonders of 
» Barcelona</h1> 
。 [aside 的 其 余 内 容 ] ... 
</aside> 


<footer role="contentinfo"> 
<p><small>&copy; Copyright All About 
» Gaudi</small></p> 
</footer> 
</div> 
</body> 
</html> 





现在 有 一 个 div 包 着 所 有 的 内 容 。 页 面 
的 语义 没有 发 生 改变 ,但 现在 我 们 有 了 一 个 可 以 用 
CSS 添加 样式 的 通用 容 希 (图 3.12.3 ) 


图 3.12.1 在 不 使 用 div 元 素 的 情况 下 ， 我 们 实现 
了 这 个 设计 。 不 过 ， 为 页 面 内 容 加 上 div (参见 
图 3.12.2 ) 以 后 ， 我 们 有 了 一 个 可 以 添加 更 多 样式 
的 通用 容 需 〈 歼 果 如 图 3.12.3 所 示 ) 
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3.12.3 div 元 素 自 喘 没 有 任何 默认 样式 ， 只 是 
其 包含 的 内 容 从 新 的 一 行 开 始 〈 图 3.12.4 ) 。 不 过 ， 
我 们 可 以 对 div 添加 样式 以 实现 目 己 的 设计 。 这里， 
我 对 div 添加 了 浅 的 背景 色 和 阴影 ， 这 样 我 就 可 以 
将 body 元 素 的 背景 改 为 渐变 的 红色 ， 使 内 容 凸 显 
出 来 。 要 查看 实现 这 个 页 面 的 HTML 和 CSS， 可 
以 访问 www.htmlcssvqs.com/8ed/structure-final 





创建 通用 容器 的 步骤 

(输入 <divy>。 

(2) 创建 容 需 的 内 容 ， 内 容 可 以 包含 任意 
数量 的 元 系 。 

(3) 在 容器 的 结尾 处 输入 </div>。 
同 header、footer、main、article、 
section、aside、nav、h1 ~ h6、p 和 其 他 很 


0 一 样 ， 上 默认 情况 下 ，div 从 新 的 一 行 开 
台 显 示 (图 3.12.4) 。 
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图 3.12.4 同一 个 页 面 在 未 对 div、 标 题 、 段 落 及 
其 他 元 素 添加 CSS 的 样子 。 可 以 看 到 ，div 并 未 产 
生 任 何 独特 的 样式 





div 对 使 用 JavaScript 实现 一 些 特定 
的 交互 行为 或 效果 也 是 有 帮助 的 。 例 如 ， 在 
页 面 中 展示 一 张 照 片 或 一 个 对 话 框 ， 同 时 让 
背景 页 面 履 盖 一 个 半 透 明 的 层 (这 个 层 通常 
/div) a 


尽管 我 始终 强调 HTML 用 于 对 内 容 
的 含义 进行 描述 ， 但 div 并 不 是 唯一 没有 语 
义 价值 的 元 素 ,span 是 与 div 对 应 的 一 个 元 素 . 
div 是 块 级 内 容 的 无 语义 容器 ， 而 span( 写作 
<Span> 这 里 是 内 容 《/span> ) 则 是 短语 内 容 的 
无 语义 容器 ,例如 它 可 以 放 在 段落 元 素 p 之 内 。 
参见 第 4 草 了 解 span。 


EEE 有 要 了 解 如 何在 div 中 使 用 地 标 角 色 ， 
参见 3.13 节 。 


尊重 版 权 
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有 天 div 的 一 些 历 史 以 及 何 时 在 HTML5 中 使 用 它 

在 本 章 讲 到 的 结构 性 元 素 中 ,，div 是 除了 hi ~ h6 以 外 唯一 早 于 HTMLS5 出 现 的 元 素 。 在 
HTMIS 之 市 ，div 这 所 辕 大 决 内 容 《( 如 贝 局 、 贝 有 ~ 主 妆 内 从 本 图 NW 附注 人 烂 寺 ) 而 可 用 
CSS 为 之 添加 样式 的 不 二 选择 。 之 前 div 没有 任何 语义 含义 ， 现 在 也 一 样 。 

这 就 是 HIMLS 引入 header、footer、main、article、section、aside 和 nav 的 原因 。 
这 些 类 型 的 构造 块 在 网 页 中 普遍 存在 , 因此 它们 可 以 成 为 具有 独立 含义 的 元 素 , 在 HTMLS5 中 ， 
0 

让 我 们 看 几 个 使 用 div 的 常见 示例 。 

我 们 之 前 已 经 见 过 一 个 了 : 为 添加 样 ， 用 一 个 容器 将 整个 页 面包 起 米 (参见 图 3.12.2 
和 图 3.12.3 ) 。 

如 何 用 div 实现 两 栏 布 局 呢 ? 我 对 article 和 aside 元素 分 别 添加 一 些 CSS， 就 能 让 它 
们 各 自 成 为 一 栏 (我 们 将 从 第 7 章 开 始 学 习 CSS; 关于 用 CSS 进行 布局 ， 参 见 第 11 草 )。 

下 
article 下 面 可 能 还 有 另 一 个 article (或 section、aside 等 ) 。 又 如 ,也许 你 想 在 第 二 栏 再 
放 一 个 aside 显示 指向 关于 Gaudf 的 其 他 网 站 的 链接 ， 或 许 再 加 一 个 其 他 类 型 的 元 素 。 

你 需要 将 期 望 出 现在 同一 栏 的 内 容 包 在 一 个 div 里 (图 3.12.5) ， 然 后 对 这 个 div 添加 
相应 的 样式 。 ( 你 或 许 在 想 是 否 也 可 以 用 section， 但 要 知道 该 元 素 并 不 能 作为 添加 样式 的 通 
用 容器 。) 图 3.12.6 有 助 于 你 形象 地 理解 代码 和 期 望 呈 现 的 CSS 布局 之 间 的 关系 。 记 住 这 只 
是 这 段 HTML 可 能 形成 的 布局 之 一 。 要 知道 CSS 是 相当 强大 的 。 

因此 ， 将 希望 在 样式 上 组 成 一 栏 的 内 容 用 div 包 起 来 是 一 种 非常 常见 的 做 法 ( 当然 ， 也 
B20 
排 而 定 。 别 忘 了 ， 作 为 内 容 区 块 的 主要 语义 化 容器 ，article、section、aside 和 nav 可 以 
位 于 任何 地 方 。 此 外 ，header 和 footer 也 是 这 样 。 在 图 3.12.5 和 图 3.12.6 中 ,main 中 只 有 
articlaea 元 志 附注 栏 只 有 aside 元 去 但 不 要 对 此 作 过 分 解读 。 

dd 人 
多 数 时 候 ， 使 用 header、footer、main ( 仅 使 用 一 次 ) 、article、section、aside 甚至 nav 
代替 div 会 更 合适 。 但 是 , 如果 语义 上 不 合适 , 也 不 必 为 了 刻意 避免 使 用 div 而 使 用 上 述 元 素 。 
有 用 得 上 div 的 地 方 ， 只 是 需要 限制 其 使 用 。 

De 
使 用 新 的 "HITMIS 元 未 0。 殉 儿 信息 分 见 113 Pe 
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<!-- 开始 页 面容 器 --> 
<div class="container"> 
<header role="banner"> 
</header> 
<!-- 应 用 CSS 后 的 第 一 栏 --> 
<main role="main"> 
<article> 
<«/article> 
«article> 
<«/article> 
..。 [更 多 的 区 块 ] ... 
</main> 
<!-- 结束 第 一 栏 --> 
<!-- 应 用 CSS 后 的 第 二 栏 --> 
<div class="sidebar"> 
<aside role="complementary"> 
</aside> 
<aside role="complementary'"> 
</aside> 
..。 [更 多 的 区 块 ] ... 
</div> 


<!-- 结束 第 二 栏 --> 


<footer role="contentinfo"> 


</footer> 
</div> 
<!-- 结束 页 面容 器 --> 
</body> 
</html> 





3.12.5 这 个 页 面 有 一 个 包含 整个 页 面 的 
div， 另 外 还 新 增 了 一 个 包 着 附注 栏 的 div。 带 有 
class="sidebar" (使 用 任何 类 名 都 可 以 ) 的 div 包 
围 着 想 要 显示 为 第 二 栏 的 内 容 。 然 后 可 以 在 CSS 
中 通过 类 定位 到 这 样 的 div 并 对 其 应 用 样式 。main 
则 加 上 了 显示 为 第 一 栏 的 样式 











<header> 
Page header 
</header> 


<main> <div class™="sidebar"> 
<article> <aside> 
Main page content (article 1) 
</article> 


Related, 
but tangential 


information 
</aside> 


<aside> 
More related, 
but tangential 
information 
</aside> 


<article> 
Main page content (article 2) 
</article> 


</main> </div> 


<footer> 
Page Footer 
</footer> 








3.12.6 ”此 图 显示 了 图 3.12.5 中 的 代码 如 何在 
概念 上 对 应 到 CSS 布局 对 应 的 形式 。 这 是 很 常见 
的 一 种 安排 ， 但 只 是 针对 这 段 HTML 众多 可 能 的 
CSS 样式 中 的 一 种 。 一 定 要 阅读 3.13 市 ， 了 解 如 
何 进一步 增强 页 面 的 语义 和 可 访问 性 





3.13 使 用 ARIA 改 粤 可 访问 性 


WAI-ARIA (Web Accessibility Initiative’s 
Accessible Rich Internet Applications， 无 障碍 
网 页 倡议 -无 障碍 的 宦 互 联网 应 用 ， 也 简称 
ARIA ) 是 一 种 技术 规范 ， 目 称 “ 有 桥架 作用 
的 拉 术 ”。 之 所 以 这 样 说 ， 是 因为 在 HTML 
提供 相应 的 语义 功能 之 前 ， 它 会 使 用 属性 来 
填补 一 些 语义 上 的 空 日 。 

你 可 能 已 经 注意 到 ， 本 章 的 大 多 数 例子 
都 使 用 了 一 个 或 多 个 ARIA role 属性 ， 而 且 
多 次 提示 你 跳 到 这 一 人 了解 更 多 关于 该 属性 
的 说 明 。 现 在 ,就 让 我 们 开始 吧 ! 噢 ， 等 等 ， 
在 讲解 role 属性 之 前 ， 先 简单 看 一 下 无 障碍 
访问 的 知识 。 

无 障碍 访问 的 意义 是 让 所 有 的 访问 者 痢 
能 获取 网 站 的 内 容 。 你 的 网 站 的 一 部 分 访问 
者 可 能 需要 信 助 辅助 设备 (如 屏 攻 阅读 着 ) 
访问 你 的 页 面 内 容 〈《 参 见 补充 材料 “试用 斌 
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幕 阅读 融 ” ) 。 

让 网 站 具备 无 障碍 访问 功能 是 成 为 严肃 
负责 的 Web 公民 的 重要 方面 。 而 且 ， 这 样 做 
对 你 也 是 有 好 处 的 一 一 为 什么 不 让 访问 者 能 
够 获取 网 站 的 内 容 呢 ? 

羊 运 的 是 ， 在 大 多 数 情况 下 ， 让 页 面具 
有 无 障碍 访问 功能 并 不 难 。 只 要 对 内 容 使 用 
最 恰当 的 HTML 进行 标记 ， 就 能 改进 网 站 的 
可 访问 性 。 如 果 你 一 直 在 这 样 做 ， 非 常 好 。 
在 这 一 节 ， 我 会 讲 到 如 何在 HTML 中 添加 一 
些 简 单 的 属性 进一步 提升 网 站 的 可 访问 性 。 


地 标 角 色 

前 面 提 到 ，ARIA 填 补 了 HTML 的 语 
义 空 白 。 例 如 ， 如 果 你 想 让 屏幕 阅读 需 用 户 
知道 如 何 跳 至 页 面 级 的 页 脚 ， 应 该 使 用 什么 
HTML 标记 呢 ? 标记 为 footer 还 不 够 ， 要 知 
道 页 面 可 以 包含 多 个 footer。 

对 此 ，HTML 没有 和 解决 方案 ， 而 ARIA 
的 地 标 角 色 (landmark role ) 则 可 以 满足 需求 。 
地 标 角 色 可 以 帮助 用 户 识 别 页 面 区 域 ， 从 而 
让 屏幕 阅读 器 用 户 可 以 直接 跳 到 这 些 区 域 。 
通常 ， 对 这 些 区 域 指 定 role 属性 就 可 以 了 。 

如 表 3.13.1 所 示 ， 地 标 角色 和 HTML5 元 
系 之 间 有 一 些 重合 《要 知道 HTML5S 也 使 用 本 
童 介绍 的 一 些 新 元 素 填补 了 某 些 语义 空白 ) ， 
但 目前 屏幕 阅读 器 对 ARIA 的 支持 更 多 。 因 





























表 3.13.1 
地 标 角色 


role="banner" (横幅 ) 


面向 全 站 的 内 容 , 通常 包含 网 站 标志 、 网 站 赞助 者 标志 、 








全 站 搜索 工具 等 。 模 幅 通 常 显示 在 页 面 的 顶端 ， 而 且 通 





着 棋 路 整个 页 面 的 宽度 


role="navigation"( 导航 ) 





文档 内 不 同 部 分 或 相关 文档 的 导航 性 元 系 ( 通常 为 链接 ) 


的 集合 
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此 你 可 以 继续 按 既 有 的 方式 创建 HTML ( 包 
括 使 用 新 元 系 ) ， 同 时 添加 一 些 ARIA 角色 
提升 页 面 的 可 访问 性 。 











试用 屏幕 阅读 器 
以 下 屏幕 阅读 器 是 最 为 常见 的 一 些 。 
除了 VoiceOver 以 外 ， 这 些 屏 幕 阅读 器 都 
仅 适 用 于 Windows。 
口 JAWS: 免费 的 演示 版 位 于 www .free- 
domscientific.com 。 
口 NVDA: 免费 , 位 于 www.nvda-project 
.Orgo 
口 VoiceOver: 免费 , 是 OSX 和 i1OS 4+ 
的 全 人 是 
Command-F5 开启 或 关闭 VoiceOver。 
要 了 解 如 何在 iOS 设备 上 使 用 Voice- 
Over, 请 访问 https://support.apple.com/ 
Kb/HT3398 。 
口 Window-Eyes: 免费 的 演示 版 位 于 
Www.gwmlcro.com 。 
强烈 建议 你 从 这 些 软件 中 挑选 一 个 进 
行 试用 。 这 样 ， 你 会 对 屏幕 阅读 器 的 用 户 
体验 有 更 深 的 理解 。 而 且 你 还 将 直观 地 了 
解 到 语义 化 的 HTML 如 何 影响 使 用 屏幕 阅 
读 器 的 体验 。 在 屏幕 阅读 器 中 测试 网 页 最 
好 成 为 建站 标准 流程 的 一 部 分 。 


一 些 可 用 的 地 标 角 色 


如 何 使 用 及 何 时 使 用 








将 其 添加 到 页 面 级 的 heade 元 素 ， 每 个 页 面 只 用 一 次 





与 nav 元 素 是 对 应 关系 。 应 将 其 添加 到 每 个 nav 元 素 ， 
或 其 他 包含 导航 性 链接 的 容 需 。 这 个 角色 可 在 每 个 页 面 
上 使 用 多 次 ， 但 是 同 nav 一 样 ， 不 要 过 度 使 用 该 属性 
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地 标 角 色 


role="main" (主体 ) 
文档 的 主要 内 容 


role="complementary"( 补充 性 内 容 ) 


如 何 使 用 及 何 时 使 用 


与 main 元 素 是 对 应 关系 。 最 好 将 其 添加 到 main 元 素 ， 
也 可 以 添加 到 其 他 表示 主体 内 容 的 元 素 ( 可 能 是 div ) 。 
在 每 个 页 面 仅 使 用 一 次 


与 aside 元 每 是 对 应 关系 。 应 将 其 添加 到 aside 或 div 元 


























文档 中 作为 主体 内 容 补 充 的 支撑 部 分 。 它 对 区 分 主体 内 
容 是 有 意义 的 

role="contentinfo"( 内 容 信 息 ) 

包含 关于 文档 的 信息 的 大 块 可 感知 区 域 这 类 信息 的 例子 
包括 版 权 声 明和 指 问 隐私 权 声 明 的 链接 等 





使 用 地 标 角 色 很 简单 。 图 3.13.1 与 3.12 
廊 中 的 例子 几乎 是 一 样 的 ， 只 不 过 添加 了 一 
个 nav 元素， 并 对 地 标 角 色 进 行 了 突出 显示 。 

表 3.13.1 引用 了 一 些 ARIA 规范 ( www. 
Ww3.0ore/TR/wai-aria/roles#landmark_roles ) 中 








<body> 

<!-- 开始 页 面容 器 --> 

<div class= Container > 
<header role="banner"> 


<nav role="navigation"> 
。 [包含 多 个 链接 的 无 序列 表 ] ..， 
</nav> 
</header> 
《1-- 应 用 CSS 后 的 第 一 栏 --》 


<main role="main"> 
<articley> 


</articley> 
<articley> 
</articley> 


。[ 其 他 区 块 ] ... 
</main> 





图 3.13.1 


素 ( 前 提 是 该 div 仅 包含 补充 性 内 容 ) 。 可 以 在 一 个 页 
面 里 包含 多 个 complementary 角色 ， 但 不 要 过 度 使 用 

将 其 添加 至 整个 页 面 的 页 脚 (通常 为 footer 元 素 ) 。 
个 页 面 仅 使 用 一 次 





对 地 标 角 色 的 定义 及 推荐 用 法 ( 男 外 还 有 三 
种 地 标 角 色 ， 参 见 第 一 条 提示 ) 。 对 它们 的 
描述 看 起 来 会 很 熟悉 ， 因 为 它们 与 对 应 的 
HTML 元 素 的 用 法 是 相似 的 (参见 图 3.13.1 














和 图 3.13.2 ) 。 


《1-- 结束 第 一 栏 --> 

<!-- 应 用 CSS 后 的 第 二 栏 --> 

<div class="sidebar"> 
<aside role="complementary"> 
</aside> 


<aside role="complementary"> 


</asidey> 


。 [其 他 区 块 ] ... 
</div> 
《1-- 结束 第 二 栏 --> 


<footer role="contentinfo"> 
</footeTy> 

</div> 

《1-- 结束 页 面容 器 --> 


</body> 
</html> 











这 个 页 面 使 用 了 表 3.13.1 中 列 出 的 五 种 地 标 角 色 ( 还 有 一 种 表 中 未 列 出 的 ) 
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<header role="banner'"> 
Page header 
<nav roloe="navigation"> 
gation 


<main role="main"> <div class="sidebar"> 


<article> <aside 
role="couplemantary”> 
lated 


Re , 
but tangential 
jiniormation 


Main page content (article 1) 
</article> 


</aside> 
<article> <aside 
Main page content (article 2) role="comploemoentary”> 
</article> More related, but 
tangential information 
</aside> 


</main> </div> 


<footer rolen"contentinfo"> 


Page 
</footer> 





3.13.2 ”这 张 图 与 3.12 节 中 的 图 很 相似 。 这 张 
图 仅 用 于 将 稼 见 的 地 标 角 色 可 视 化 ， 并 不 代表 它 
们 对 布局 有 影响 。 例 如 ， 在 main 元 素 中 ， 可 以 包 
含 一 个 带 有 role="navigation" 的 nav 作为 局 部 导 
航 。 同 时 ， 带 有 class="sidebar" 的 div 也 可 以 添 
加 role="complementary"， 从 而 代替 aside 元 素 ， 
前 提 是 整个 附注 栏 的 内 容 确实 为 补充 性 内 容 

需要 澄清 的 是 ， 即 便 不 使 用 ARIA 地 标 
角色 ， 页 面 看 起 来 也 没有 任何 差别 ， 但 是 使 
用 它们 可 以 提升 使 用 辅助 设备 的 用 户 的 体验 。 
出 于 这 个 理由 ， 推 荐 使 用 它们 。 在 本 书 的 例 
子 中 ， 我 都 在 恰当 的 地 方 使 用 了 它们 。 本 书 
配套 网 站 上 的 代码 示例 也 是 这 样 做 的 。 


和 绩 表 3.13.1 没 有 包含 另外 三 种 地 标 
角色 。 对 表单 元 素来 说 ，form 角色 是 多 余 
的 ; search 用 于 标记 搜索 表单 ; application 
则 属于 高 级 用 法 。16.8 节 有 一 个 使 用 
role="search" 的 例子 。 




















不 要 在 页 面 上 过 多 地 使 用 地 标 角色 。 
过 多 的 地 标 角 色 会 让 屏幕 阅读 器 用 户 感 到 累 


人 欧 ， 从 而 降低 地 标的 作用 ， 有 影响 整体 体验 。 
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可 用 性 专家 Steve Faulkner 对 地 标 
角色 有 详细 的 讲解 ， 见 blog.paciellogroup. 
com/2013/02/using-wai-aria-landmarks-2013/。 
( 表 3.13.1 与 他 的 表格 之 间 的 细小 差别 可 
以 忽略 。) 他 还 引用 了 另 一 位 专家 Léonie 
Watson 录制 的 演示 屏幕 阅读 器 用 户 访问 页 面 
行为 的 视频 ， 推 荐 观看 ! 


WebAIM 会 定期 对 屏幕 阅读 器 用 户 做 
一 些 调查 ， 以 了 解 他 们 访问 网 站 的 偏好 和 过 
到 的 问题 。 调 查 结 果 很 值得 一 读 ， 见 webaim. 


org/projects/screenreadersurvey4/。 


地 标 角 色 只 是 ARIA 规范 (www. 
Ww3.org/TR/wai-aria/ ) 众多 特性 中 的 一 个 。 如 
果 对 相关 的 实施 指南 感 兴趣 ， 可 以 访问 WWw. 
w3.0rg/WAI/PF/aria-practices/。 


可 以 在 CSS 选择 器 中 使 用 ARIA 角色 
属性 ， 从 而 对 使 用 它们 的 元 素 添加 样式 。 有 具 
体 细节 参见 第 11 章 。 


3.14 ”为 元 素 指定 类 别 或 ID 名 称 


尽管 并 非 必需 ,但 是 可 以 给 HTML 元 素 
分 配 唯 一 的 标识 符 (ID ) ,或 指定 其 属于 某 
个 (或 某 几 个 ) 类 别 ， 也 可 以 同时 指定 标识 
符 和 类 别 ， 如 图 3.14.1 所 示 。 

接着 ， 就 可 以 对 具有 给 定 id 或 class 名 
称 的 元 素 添加 样式 了 (但 一 般 不 推荐 出 于 添 
加 样式 的 目的 使 用 id) ; 或 者 创建 指向 具有 
特定 id 的 元 素 的 链接 ( 图 3.14.1 ) ; 还 可 以 
使 用 JavaScript 获取 id 和 class 属性 ， 从 而 
对 元 素 添加 特定 的 行为 。 
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<body> 
<div class="container"> 
<header Tole= banneT > 
<nav role="navigation"> 
<ul> 
<li><a href="#gaudi">Barcelona's 
* Architect</a></1i> 
<li><a href="#sagrada-familia" 
» ]ang= es >La Sagrada Familia 
" </a></1i> 
《Li><a href="#park-guell">Park 
» Guell</a></1i> 
</ul> 
</nav> 
</header> 


<main Tole= main > 
<article class="architect gaudi > 
<h1 id="gaudi">Barcelona's 
* Architect</h1> 


<p>Antoni Gaudi's incredible 


» buildings...</p> 


<h2 id="sagrada-familia" lang= 
» "es'>La Sagrada Familia</h2> 


<h2 id="park-guell">Park Guell 
* </h2> 


<«/article> 
</main> 


</div> 
</body> 
</html> 


3.14.1 nav 中 的 链接 指向 hl 和 hz 中 的 id。 为 
一 个 或 多 个 元 素 添加 class 属性 ， 就 可 以 对 所 有 这 
类 元 系统 一 进行 格式 化 。 例 如 ， 可 以 将 architect 
类 应 用 到 关于 其 他 建筑 师 的 内 容 ， 从 而 为 它们 应 用 
一 致 的 格式 ; gaudi 类 可 以 为 与 他 相关 的 内 容 提 供 
为 一 种 样式 








1. 为 元 素 添 加 唯一 的 1D 
在 元 又 的 开始 标签 中 输入 id="name"， 其 中 
name 是 唯一 标识 该 元 于 的 名 称 (图 3.14.1 ) 。 








name 几乎 可 以 是 任何 字符 ， 只 要 不 以 数字 开头 
月 不 包含 空格 。 


2. 为 元 素 指 定 类 别 的 方法 

在 元 系 的 开始 标签 中 输入 class= "name "， 
其 中 name 是 类 别 的 名 称 ( 图 3.14.1) 。 如 宁 
要 指定 多 个 类 别 ， 用 空格 将 不 同 的 类 别名 称 
分 开 即 可 , 如 class="name anothername",。 (可 
以 指定 两 个 以 上 的 类 别名 称 。 ) 


关于 通过 id 或 class 为 元 素 添 加 样 
式 ， 参见 9.3 节 。 不 过 ， 需 要 在 这 里 说 明 的 是 ， 
推荐 使 用 类 为 元 素 添 加 样式 。 


关于 创建 指向 标 有 id 的 元 素 的 链接 ， 
参见 6.2 节 。 如 何 对 具有 jd 或 class 的 元 素 
使 用 JavaScript 已 经 超出 了 本 书 的 范围 ， 不 过 
我 们 在 第 19 章 会 看 几 个 示例 。 


HTML 文档 中 的 每 个 id 都 必须 是 唯 
一 的 。 换 外话 说， 一 个 页 面 里 不 能 出 现 两 个 
具有 相同 id 的 元 素 ， 并 且 每 个 元 素 都 只 能 有 
一 个 id。 相同 的 id 可 以 出 现在 不 同 的 页 面 里 ， 
同一 id 也 不 一 定 每 次 都 赋 给 同一 元 素 ， 尽 管 
这 是 惯常 的 做 法 。 


相反 ， 一 个 class 名 称 可 以 分 配给 页 
面 中 任意 数量 的 元 素 ， 并 且 一 个 元 遍 可 以 有 
一 个 以 上 的 class。 


6 class 和 id 属性 可 以 应 用 于 任何 
HTML 元 素 。 元 素 可 以 同时 拥有 id 和 任意 数 
量 的 class。 


在 class 和 id 名称 中 ， 通 常 使 用 短 横 
线 分 隔 多 个 单词 ， 例 如 class="footer-page"。 
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不 管 你 打算 如 何 使 用 id 和 class， 都 
应 该 为 它们 选择 有 意义 的 名 称 。 例 如 ， 如 果 
你 使 用 class 是 出 于 格式 化 目的 ， 应 避免 使 
用 描述 表现 样式 的 名 称 ， 如 class="red",， 
为 你 可 能 在 下 周 决 定 将 配色 方案 改 为 蓝 色 。 
尽管 在 CSS 中 对 分 配给 某 一 类 元 素 的 颜色 进 
行 修 改 是 相当 容易 的 ， 但 这 样 做 会 导致 你 的 
HTML 拥有 一 个 名 为 红色 却 实际 呈现 为 另 一 
种 颜色 的 class。 同 时 ， 改 交 HTML 中 所 有 
的 class 通常 是 一 项 繁琐 的 工作 。 这 点 在 你 开 
始 学 习 CSS 之 后 尤为 明显 。 


可 以 使 用 class 属性 实现 微 格式 
(microformat ) 。 更 多 信息 参见 http://microfo- 


rmats.Org。 


3.15 “为 元 素 添 加 title 属性 


可 以 使 用 title 属性 (不 要 与 title 元 素 
混淆 ) 为 网 站 上 任何 部 分 加 上 提示 标签 ( 参 
见 图 3.15.1 至 图 3.15.3 ) 。 不 过 ， 它 们 并 不 只 
是 提示 标签 ， 加 上 它们 之 后 屏幕 阅读 需 可 以 
为 用 户 野 读 title 文本 ， 因 此 使 用 title 可 以 
提升 无 障碍 访问 功能 。 








<ul title="Table of Contents"> 
《Li><a href="#gaudi" title="Learn about 
Antoni Gaudi">Barcelona's Architect 
» </a></1i> 
<li><a href="#sagrada-familia" lang="es"> 
‘La Sagrada Familia</a></1i> 
<1li><a href="#park-guell">Park Guell</a> 
:LS 
</ul> 


</body> 
</html> 


图 3.15.1 可 以 为 任何 元 素 添加 title， 不 过 用 的 
最 多 的 是 链接 
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s Barcelonas Architect 
s Lasaprada Familia 


» Parkk Guell  Ik 
| Table of Contents 


Barcelona's Arcnitecr™ 





Antoni Gaudi's incredible buildings bring millions of 





图 3.15.2” 当 访问 者 将 鼠标 指 问 加 了 说 明 标 签 的 
元 素 时 ， 就 会 显示 title。 如 果 指 问 Barcelona’s 
Architect 链接 ……… 


入 向 和合 Adding the Title Attribute te Elerments 


| Adding the Title Attribute to Ele... 


a Barcelona's Architegt 
s Lasaprada Familia a 

| Learn about Antoni Gaudi, 
四 Park Guell | Learn about Antoni Gaudi 


Barcelona's Architect 


直人 redihle hilAdin me hring millions of 
wiinwallaboutgaudicom overview.htmlaaaudi 


3.15.3 ……… 会 看 到 Learn about Antoni Gaudi, 
因为 该 链接 有 title 属性 


在 网 页 中 为 元 素 添 加 标签 

在 要 添加 title 的 HTML 元 素 中 ， 输 入 
title="7abe1"， 其 中 1abel 是 访问 者 将 鼠标 
移 到 这 个 元 素 上 时 希望 出 现在 提示 框 里 的 文 
本 ,或 者 希望 由 屏 基 阅读 带 朋 读 的 文本 。 














寺 时 有 旧版 本 的 Internet Explorer (IE7 及 之 
前 的 版 本 ) 还 会 将 img 元 素 (参见 第 5 章 ) 
的 alt 属性 作为 提示 框 的 文本 。 不 过 ， 如 果 
img 元 素 同 时 包括 title 和 alt 属性 ， 则 提示 
框 会 未 用 title 属性 的 内 容 ， 而 不 是 alt 属性 
的 内 容 。 
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3.16 ”添加 注释 


可 以 在 HTML 文档 中 添加 注释 ， 标 明 区 
块 开始 和 结束 的 位 置 ， 提 醒 自 己 (或 未 来 的 
代码 编辑 者 ) 某 段 代码 的 意图 ， 或 者 阻止 内 
容 显 示 等 ， 如 图 3.16.1 所 示 。 这 些 注释 只 会 
在 用 文本 编辑 右 或 浏览 絮 的 “查看 源 代 码 ” 
选项 打开 文档 时 显示 出 来 。 访 问 者 在 浏览 妖 
中 是 看 不 到 它们 的 ， 如 图 3.16.2 所 示 。 





==== 开始 主体 内 容 === 
<main role="main"> 
<article class="architect"> 
<h1 id="gaudi">Barcelona's Architect 
» </h1> 


<!-- 这 一 段 不 会 显示 出 来 ， 因 为 它 被 注释 

一 掉 了 

<p>Antoni Gaudi' s incredible 
buildings bring millions of 
tourists to Barcelona each year. 
‘</p> 

-= 


<p>Gaudi's non-conformity, already 
» Visible in his teenage years...</p> 


<«/article> 
</main> 
<!-- 结束 主体 内 容 --> 


==== 开始 附注 栏 ==== 
。. [附注 栏 内 容 ] ... 
<!-- 结束 附注 栏 --> 





图 3.16.1 这 段 示例 代码 包括 五 个 注释 。 其 中 有 四 
个 一 起 标记 了 两 个 区 块 的 开始 和 结束 位 置 。 为 一 个 
“注释 掉 ” 了 第 一 段 ， 这 样 它 就 不 会 显示 在 页 面 中 
( 如果 希望 永久 性 地 移 除 该 段 ， 最 好 将 它 从 HTML 
中 删除 ) 




















在 HTML 页 面 中 添加 注释 的 步骤 
(1) 在 HIML 文档 中 希望 搬入 注释 的 位 








置 ， 输入 <1--, 
(2) 输入 注释 。 
(3) 输入 --> 结束 注释 文本 。 


a Barcelonas Architect 


ea Lasaprada Familia 
s Park Guell 


Barcelona's Architect 


Gaudfs non-conformity, already visible in his teenage 
years, coupled with his guiet but firm devotion to the 
church, made a uniqgue foundation for his thoughts and 
ideas, His search for simplicity, based on his careful 


一 了 井下 由 LD 有 EE 站 日 而 - 





图 3.16.2 注释 是 不 可 见 的 。 类 似 地 ， 如 果 将 一 些 
内 容 “注释 掉 ”， 它 们 也 不 会 显示 出 来 。 这 段 代码 
中 的 第 一 个 段落 并 不 会 显示 在 浏览 可 中 








在 主要 区 块 的 开头 和 结尾 处 添加 注释 
是 一 种 常见 的 做 法 ， 这 样 可 以 让 你 或 一 起 合 
作 的 开发 人 员 将 来 修改 代码 变 得 更 加 容易 。 
笔者 喜欢 使 用 一 种 比 结束 注释 更 为 醒目 的 格式 
编写 开始 注释 ， 从 而 更 容易 区 分 这 两 个 位 置 。 


ES 国 在 发 布 网 站 之 前 ， 应 该 用 浏览 器 查看 
一 下 加 了 注释 的 页 面 。 这 样 能 帮 你 避免 由 于 
弄 错 注释 格式 导致 私人 化 的 注释 内 容 直 接 暴 
露 给 公众 访问 者 的 情况 。 

国 呈 对 特别 私人 化 的 注释 要 格外 小 心 。 尽 
管 通常 通过 浏览 器 访问 页 面 不 会 看 见 注 释 内 
容 ， 但 通过 浏览 器 的 “查看 源 代 码 ” 功 能 就 
能 看 见 它们 ， 如 果 用 户 将 网 页 保存 为 HTML 
源 代 码 ， 他 们 也 能 看 见 这 些 注释 。 


全 绞 ”注释 不 能 谈 套 在 其 他 注释 里 。 
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文本 


本 章 内 容 

口 添加 段落 

口 指定 细则 

口 标记 重要 或 强调 的 文本 


口 创建 图 
口 指明 引用 或 参考 
口 引述 文本 


口 指定 时 间 

口 解释 缩写 词 

口 定义 术语 

口 创建 上 标 和 下 标 

口 添加 作者 联系 信息 
口 标注 编辑 和 不 准确 的 文本 
口 标记 代码 

口 使 用 预 格式 化 的 文本 
口 突出 显示 文本 

口 创建 换行 

口 创建 span 

口 其 他 元 素 


除非 网 站 添加 了 太 多 视频 和 图 片 ， 否 则 
网 页 的 大 部 分 内 容 还 是 文本 。 本 童 将 说 明 针 
对 不 同 的 文本 类 型 ， 尤 其 是 (但 不 仅仅 是 ) 
那些 句子 或 短语 里 的 文本 ， 应 该 选择 哪些 合 
适 的 HTML 语义 化 元 素 。 











例如 ，em 元 素 用 于 标识 强调 的 文本 ， 
cite 元 素 用 于 标识 对 艺术 作品 、 
等 内 容 的 引用 。 

浏览 锅 通常 会 为 这 些 文本 元 素 添 加 不 同 
的 样式 ， 以 区 别 于 普通 文本 。 例 如 ，em 和 
cite 元 素 中 的 文本 都 是 斜体 的 。 又 如 ，code 
元 素 专 门 用 来 格式 化 脚本 或 程序 中 的 代码 ， 
该 元 素 中 的 文本 默认 使 用 等 宽 字 体 。 

内 容 显 示 的 样子 与 为 其 使 用 的 标记 没有 
关系 。 因 此 ， 不 应 该 为 了 让 文字 变 为 斜体 就 
使 用 em 或 cite， 添加 样式 是 CSS 的 事情 。 

相反 ， 应 该 选择 能 描述 内 容 的 HTML 元 
素 。 如 有 果 浏 览 需 默认 添加 的 样式 与 你 想 用 
CSS 设置 的 样式 相同 ， 那 只 不 过 是 一 种 额外 
的 奖励 。 如 果 不 相 同 ， 直 接 自 己 编写 CSS 和 窗 
盖 黑 认 样 式 就 可 以 了 。 

















4.1 添加 段 洛 


HTML 会 忽略 你 在 文本 编辑 器 中 输入 的 
回 车 符 和 其 他 额外 的 空格 。 要 在 网 页 中 开始 
一 个 新 的 段落， 应 该 使 用 pp 元素， 如 网 4.1.1 
和 图 4.1.2 所 示 。 
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0 


<h1>Antoni Gaudi</h1> 

<p>Many tourists are drawn to Barcelona 
‘to see Antoni Gaudi's incredible 
architecture.</p> 


<p>Barcelona celebrated the 150th 
anniversary of Gaudi's birth in 
2002.</p> 


<h2 jang= es >La (Casa Mila</h2> 


<p>Gaudi's work was essentially useful. 
<span lang="es">La Casa Mila</span> is 
an apartment building and real people 
‘live there.</p> 


<h2 lang="es">La Sagrada Familia</h2> 

<p>The complicatedly named and curiously 
"unfinished Expiatory Temple of the 
"Sacred Family is the most visited 
building in Barcelona.</p> 


</body> 
</htm]> 





4.1.1 毫 无 颖 问 ，p 是 最 浓 使 用 的 HTML 元 素 
之 一 (注音: 在 实践 中 ， 我 通常 会 使 用 article 包 
住 这 些 内 容 。 这 里 省 略 了 该 标记 ， 是 为 了 让 例子 
显得 更 为 通用 ， 同 时 避免 产生 p 元 素 必 须 般 套 在 
article 中 的 印象 ) 














Paragraphs 





Paragraphs 


Antoni Gaudi 


Many tourists are drawn to Barcelona to See Antoni Gaudi's 
incredible architecture. 


Barcelona celebrated the 150th anniversary of Gaudfs birth in 2002. 


La Casa Mila 


Gaudfs work was essentially Useful, La Casa Mila is an apartment 
building and real people live there. 


La Sagrada Familia 


The complicatedly named and curiously unfinished Expiatory Temple 
of the Sacred Family is the most visited building in Barcelona. 





图 4.1.2 这 是 段落 通常 默认 的 呈现 方式 。 默 认 情 
况 下 ， 浏 览 器 会 在 标题 和 段落 之 间 ， 以 及 不 同 的 段 
沙 之 间 添 加 懂 下 间距 。 使 用 CSS 可 以 控制 所 有 内 
容 元 素 的 格式 


创建 新 段落 的 步骤 

(1) 输入 <p>。 

(2) 输入 新 段落 的 内 容 。 

(3) 输入 </p> 结束 这 个 段落 。 


可 以 为 段落 (以 及 页 面 上 的 其 他 文本 ) 
添加 样式 ， 和 包括 字体 、 字 号 、 顾 色 等 。 详 细 
内 容 参 见 第 10 章 。 


要 控制 段 内 行 间距 ， 参 见 10.7 节 。 要 
控制 段 前 段 后 的 间距 , 参见 11.8 节 和 11.10 节 。 


可 以 通过 CSS 改变 段落 文本 的 对 齐 方 
式 ， 包 括 左 对 齐 、 右 对 齐 和 居中 对 齐 (参见 
10.13 节 ) 。 


4.2 ”指定 细则 


根据 HTML5，small 表示 细则 一 类 的 劳 
注 (side comment ) ，“ 通 稼 包括 免责 声明 、 
注意 事项 、 法 律 限 制 、 版 权 信 息 等 。 有 时 我 们 
还 可 以 用 它 来 表示 署名 , 或 者 满足 许可 要 求 。” 

small 通常 是 行内 文本 中 的 一 小 块 ， 而 不 
是 包含 多 个 段落 或 其 他 元 素 的 大 块 文本 ， 参 
见 图 4.2.1 和 图 4.2.2。 


























指定 细则 的 步 又 











(1) 输入 <small>。 

(2) 输入 表示 人 免责 声明 、 注 解 、 暂 名 等 类 
型 的 文本 。 

(3) 输入 </small>。 


一 些 浏览 器 会 将 small 包 念 的 文本 显 
示 为 小 字号 (图 4.2.2) 。 不 过 ， 一 定 要 在 符 
合 内 容 语义 的 情况 下 使 用 该 元 素 ， 而 不 是 为 
了 减 小 字号 而 使 用 。 总 是 可 以 用 CSS 控制 字 
号 ( 如果 你 想 ， 甚 至 可 以 让 small 包 念 的 文本 
的 字号 变 大 ) ， 更 多 信息 参见 10.6 节 。 
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<body> 


<p>0rder now to receive free shipping. 
<small>(Some restrictions may apply.) 
</small></p> 


<footer role="contentinfo"> 
<p><small>&copy; 2013 The Super 
Store. All Rights Reserved. 
</small></p> 
</footer> 


</body> 
</htm]> 


4.2.1 在 下 面 的 两 个 例子 中 ， 我 们 用 small 元 
素来 表示 简短 的 法 律 声 明 。 在 第 二 个 例子 中 ， 
small 表示 的 是 包含 在 页 面 级 footer 里 的 版 权 声 
明 ， 这 是 一 种 稼 见 的 用 法 





全 日 全 specifying Fine Print 


Specifying Fine Print 





Order now to receive free shipping. (Some restrictions may apply.) 


2013 The Super Store. All Rights 及 eserved 


4.2.2 在 一 些 浏览 侣 中 ，small 元 素 中 文本 的 字 
号 会 比 普通 文本 的 字号 小 ， 不 过 ， 视 党 上 的 大 小 与 
是 否 该 用 它 标 记 内 容 训 无 关系 











用 small 标记 页 面 的 版 权 信 息 是 一 种 
常见 的 做 法 (图 4.2.1、 图 4.2.2) 。 不 过 ， 
small 只 适用 于 短语 ， 因 此 不 要 用 它 标 记 长 的 
法 律 声明 , 如 “使 用 条 款 ” 和 “隐私 政策 ”页 面 。 
根据 需要 ， 应 该 用 段落 或 其 他 语义 标签 标记 
这 些 内 容 。 


4.3 标记 重要 和 强调 的 文本 
strong 元 系 表 示 内 容 的 重要 性 ， 而 em 则 











4.3 ”标记 重要 和 强调 的 文本 65 





表示 内 容 的 着 重点 。 根 据 内 容 需 要 ， 这 两 个 
元 双 既 可 以 单独 使 用 ， 也 可 以 一 起 使 用 ， 参 
见 图 4.3.1 和 图 4.3.2。 





<body> 


<p><strong>Warning: Do not approach the 
» zombies <em>under any circumstances</em> 
></strong>. They may <em>look</em> 
friendly，but that's just because they want 
to eat your arm.</p> 


</body> 
</htm]> 





4.3.1 第 一 个 句子 既 有 strong 又 有 em， 而 第 二 
个 合子 风 有 部 





Warning: Do not approach the zombies under any 


circumstances. They may look friendly, but that's just because 
they want to eat your arm. 





4.3.2 ”浏览 器 通常 将 strong 文本 以 粗 体 显 示 ， 
而 将 em 文本 以 斜体 显示 。 如 果 em 是 strong 的 子 
元 素 ( 如 图 4.3.1 中 的 第 一 个 句子 ) ， 将 同时 以 斜 
体 和 粗 体 显 示 文 本 


标记 重要 文本 

(1) 输入 “strong>。 

(2) 输入 想 标记 为 重要 内 容 的 文本 。 
(3) 输入 </strong>。 


强调 文本 

(1) 输入 <em>。 

(2) 输入 想 强调 的 文本 。 
(3) 输入 </em>。 
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不 要 使 用 bb 元素 代替 strong， 也 不 要 
使 用 元 素 代 替 em。 尽 管 它们 在 浏览 器 中 显 
示 的 样式 是 一 样 的 ， 但 它们 的 含义 却 很 不 一 
样 (参见 补充 材料 “HTMLS 中 重新 定义 的 b 
和 二 元 素 ”)， 


就 像 在 说 话 时 强调 某 些 词语 一 样 ，em 
在 句子 中 的 位 置 会 影响 句子 的 含义 。 例 如 ， 
<p<em>Run</em> over here.</p> 和 <p>Run 
over <em>here</em>.</p> 表达 的 意思 是 不 一 


可 以 用 CSS 将 任何 文本 变 为 粗 体 或 
斜体 ， 也 可 以 履 盖 strong 和 em 等 元 素 的 浏览 
器 默认 显示 样式 (图 4.3.2) 。 更 多 细节 参见 
0A4 季 名和 035 等 ， 


如 果 你 有 过 编写 旧版 本 HTML 的 经 
验 ， 你 或 许 知 道 ， 那 时 strong 所 表示 文本 的 
强调 程度 比 em 表示 的 文本 要 高 。 不 过 ,在 
HTMLS 中 ，em 是 表示 强调 的 唯一 元 素 ， 而 
strong 表示 的 则 是 重要 程度 。 


样 的 。 


可 以 在 标记 为 strong 的 短语 中 再 占 
套 strong 文本 。 如 果 这 样 做 ， 作 为 另 一 个 
strong 的 子 元 素 的 Strong 文本 的 重要 程度 会 
递增 。 这 种 规则 对 误 套 在 另 一 个 em 里 的 em 文 
本 也 适用 。 例如 ,在 语句 <p><strong>Remember 
that entries are <strong>due by March 
12th</strong>.</strong></p> 中 ,， “due by 
March 12th” 要 比 其 他 strong 文本 更 为 重要 。 


HTML5 中 重新 定义 的 b 和 i 元 素 

HTMLS 强调 元 素 的 语义 ， 而 非 表 现 。b 和 元素 是 早期 HTML 遗留 下 来 的 产物 ， 它 们 
分 别 用 于 将 文本 变 为 粗 体 和 斜体 ( 那 时 CSS 还 未 出 现 ) 。HTML 4 和 XHTML 1 当然 抛弃 了 
它们 ， 因 为 它们 本 质 上 是 用 于 表现 的 。 当 时 的 规范 建议 编码 人 员 用 strong 替代 pb， 用 em 替代 
1i。 不 过 ， 事 实证 明 ，em 和 strong 有 时 在 语义 上 并 不 合适 。 为 此 ，HTMLS 重新 定义 了 b 和 1。 

传统 出 版 业 里 的 某 些 排版 规则 在 现 有 的 HTML 语义 中 还 找 不 到 对 应 物 ， 其 中 就 包括 用 斜 
体 表 示 植 物 学 名 (如 “Ulmus americana is the Massachusetts state tree.” ) 、 上 有 具体 的 交通 工具 
名 称 ( 如 “We rode the Orient Express. ” ) 及 外 来 语 ( 如 “The couple exhibited a joie de vivre 
that was infectious.” ) 。 这 些 词语 不 是 为 了 强调 而 加 上 斜体 的 ， 只 是 样式 上 的 惯例 。 

为 了 应 对 这 些 情况 ，HTML5 没有 创建 一 些 新 的 语义 化 元 素 (进一步 把 事情 搞 复 杂 ) ， 而 
是 采取 了 一 种 很 实际 的 做 法 ， 直 接 利 用 现 有 元 素 : em 用 于 所 有 层次 的 强调 ，strong 用 于 表示 
重要 性 ， 而 其 他 情况 则 使 用 b 和 i。 
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而 且 你 还 可 以 通过 CSS 改变 它们 粗 体 或 斜体 的 样式 。HTMLS 强调 , b 和 应 该 是 其 他 元 素 ( 如 


strong、em、cite 等 ) 都 不 适用 时 的 最 后 选择 。 


Ob 元 素 简 介 
HTMLS 将 b 重新 定义 为 : 


b 元 素 表示 出 于 实用 目的 提醒 读者 注意 的 一 块 文字 ， 不 传达 任何 额外 的 重要 性 ， 也 不 表 
示 其 他 的 语 态 和 语气 ， 用 于 如 文档 摘要 里 的 关键 词 、 评 论 中 的 产品 名 、 基 于 文本 的 交互 式 软 


人 
例如 : 


<p>The <b>XR-5</b>，also dubbed the <b>Extreme Robot 5</b>, is the best robot we ' ve ever 


testede</p> 
b 元 素 默 认 显示 为 粗 体 。 


@ i 元素 简介 
HTMLS 将 二 重新 定义 为 : 


i 元 素 衣 示 一 块 不 同 于 其 他 文字 的 文字 , 具有 不 同 的 语 态 或 语气 , 或 其 他 不 同 于 常规 之 处 ， 
用 于 如 分 类 名 称 、 技 术 术 语 、 外 语 里 的 惯用 语 、 翻 译 的 散文 、 西 方 文字 中 的 船舶 名 称 等 。 


例如 : 


<p>The <i lang="l1a">Ulmus americana</i> is the Massachusetts state tree.</p> 


<p>We rode the <i>Orient Express</i>.<p> 


<p>The couple exhibited a <i lang="fr">joie de vivre</i> that was infectious.<p> 


i 元素 上 默认 显示 为 斜体 。 


4.4 创建 图 


你 一 定 在 报纸 、 杂 志 、 报 告 等 其 他 媒介 上 
看 到 过 图 。 通 常 ， 图 是 由 页 面 上 的 文本 引述 出 
来 的 。 本 书 的 大 多 数 页 面 都 有 这 样 的 例子 。 

在 HTMLS5 出 现 之 前 ,没有 专门 实现 这 个 
日 的 的 元 素 ， 因 此 一 些 开 发 人 员 想 出 了 他 们 
自己 的 解决 办 法 (通常 会 使 用 不 那么 理想 的 、 
没有 语义 的 div 元 素 ) 。 通 过 引入 figure 和 
figcaption，HTMLS 改变 了 这 种 情况 ( 参见 
图 4.4.1 和 图 4.4.2 ) 。 图 可 以 是 图 表 、 照 厂 、 
图 形 、 插 图 、 代 码 片 段 ， 以 及 其 他 类 似 的 独 
立 内 容 。 








可 以 由 页 面 上 的 其 他 内 容 引出 figure( 如 
图 4.4.1 和 图 4.4.2 所 示 ) 。figcaption 是 
figure 的 标题 ， 可 选 ， 出 现在 figure 内 容 的 
开头 或 结尾 处 。 

创建 图 及 其 标题 的 步骤 

(1) 输入 <figure>。 

(2) 作为 可 选 步 台 ,输入 <figcaption> 开 
始 图 的 标题 。 

(3) 输入 标题 文字 。 

(4) 如 有 果 在 第 (2)、(3) 步 创 建 了 标题 ， 就 
输入 </figcaption>。 

(5) 添加 图 像 、 视 频 、 数 据 表 格 等 内 容 的 
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代码 创建 图 。 

(6) 如 果 没 有 在 figure 内 容 之 前 包含 
figcaption， 则 可 以 在 内 容 之 后 重复 第 (2) ~ 
(4) 步 。 

(7) 输入 </figure>。 


<body> 


<article> 
<h1>2013 Revenue by Industry</h1> 


《05 1 .人 阵 


<figure> 
<figcaption><b>Figure 3:</b> 
Breakdown of Revenue by 
Industry</figcaption> 


<img src="chart-revenue.png" 
width="180" height="143" alt= 
" "Revenue chart: Clothing 42%, 
"Toys 36%, Food 22%" /> 
</figure> 


<p>As Figure 3 illustrates, ... </p> 


《<p>..。 [其 他 报告 内 容 ] ../p> 
</article> 


</body> 
</htm]> 





4.4.1 这 个 figure 只 有 一 个 图 表 ， 不 过 放置 多 
个 图 像 或 其 他 类 型 的 内 容 ( 如 数据 表格 、 视 频 等 ) 
也 是 允许 的 。figcaption 元 系 并 不 是 必需 的 ， 但 如 
条 包含 它 ， 它 就 必须 是 figure 元 素 内 黄 的 第 一 个 
或 最 后 一 个 元 素 。 除 了 在 现代 浏览 器 中 从 新 的 一 行 
开始 显示 ,figure 没 有 默认 样式 ,如 图 4.4.2 所 示 ( 注 
意 : figure 元 素 并 不 一 定 要 包含 在 article 里 , 但 
在 大 多 数 情况 下 这 样 做 比较 合适 ) 














EB 通常 ，figure 是 引用 它 的 内 容 的 一 部 
分 (图 4.4.1) ， 但 它 也 可 以 位 于 页 面 的 其 他 
Eh 分 ， 或 位 于 其 他 页 面 ( 如 附录 ) 。 


Wy 


Creating & Figure 


六 = 一 ~ 


Creating a Figuyre 


下 
| 


2013 Revenue by Industry 
.1 [TEpOTt content] ... 


Figure 3: Breakdowrn ot 
Revenue by Industry 


As Figure 3 illustrates, . . . 


. [imore report content] ,，， 








4.4.2 ”这 个 包含 图 表 及 其 标题 的 figure 出 现在 
article 文本 中 间 。 图 以 缩 进 的 形式 显示 ， 这 是 浏 
览 需 的 默认 样式 〈 人 参见 最 后 一 条 提示 ) 





figure 元 素 可 以 包含 多 个 内 容 块 。 
例如 ， 图 4.4.1 中 可 以 包含 两 个 图 表 : 一 个 
表示 收入 ， 一 个 表示 利润 。 不 过 要 记 住 ， 
不 党 figure 里 有 多 少 内 容 ， 只 允许 有 一 个 
figcaption。 


不 要 简单 地 将 figure 作为 在 文本 中 
误 入 独立 内 容 实 例 的 方法 。 这 种 情况 下 ， 通 
常 更 适合 用 aside 元 素 (参见 3.10 节 ) 。 


要 了 解 如 何 结 合 使 用 blockquote 和 
figure 元 素 ， 参 见 4.6 节 。 
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可 选 的 figcaption 必须 与 其 他 内 容 一 
起 包含 在 figure 里 面 ， 不 能 单独 出 现在 其 他 
位 置 。 


figcaption 中 的 文本 不 必 以 Figure 3、 
Exhibit B 等 字样 开头 ， 对 内 容 的 一 名 简短 描 
述 即 可 ， 就 像 照 片 的 描述 文本 。 


现代 浏览 器 在 默认 情况 下 会 为 figure 
添加 40px 宽 的 左右 外 边 距 ( 图 4.4.3 ) 。 可 以 
使 用 CSS 的 margin-left 和 margin-right 属 
性 修改 这 一 样式 。 例 如 ,使 用 margin-left: 
0; 可 以 让 图 直接 抵 到 页 面 左 边缘 。 还 可 以 使 
用 figure { float: left; } 让 包含 figure 的 
文本 环绕 在 它 周围 (这样 ,文本 就 会 围 在 图 的 
右 侧 ) 。 可 能 还 需要 为 figure 设置 width， 
使 之 不 至 于 占据 太 大 的 水 平 空间 。 本 书 将 从 第 
7 章 开 始 阅 述 CSS，float 和 width 属性 会 在 
第 11 章 中 讲 到 。 


@AQ CreatingaFigure (Styled) 
Creating a Figure (Styled) 





2013 Revenue by Industry 


... [report content] ... 


Figure 3: 
Breakdown of Revenue by Industry 


As Figure 3 illustrates, .. . 


.:. [more report content] ... 





4.4.3 使 用 一 点 CSS 就 可 以 让 figure 与 它 
劳 边 的 文本 区 分 开 来 。 这 个 简单 的 例子 见 www. 
htmlcessvgs.com/8ed/figure-styled/ 


4.5 指明 引用 或 参考 


使 用 cite 元 又 可 以 指明 对 某 内 容 源 的 引 
用 或 参考 。 例 如 ， 戏 剧 、 脚 本 或 图 书 的 标题 ， 
歌曲 、 电 影 、 照 片 或 雕塑 的 名 称 ， 演 唱 会 或 
痛 乐 会 ， 规 邦 、 报 纸 或 法 律 文件 等 (参见 
图 4.5.1 和 图 4.5.2 ) 。 





<body> 


<p>He listened to <cite>Abbey Road</cite> 
”while watching <cite>A Hard Day's Night 
</cite> and reading <cite>The Beatles 
Anthology</cite>. 


<p>When he went to The Louvre, he learned 
that <cite>Mona Lisa</cite> is also 
» known as <cite lang="it">La Gioconda 
; </cite>.</p> 


</body> 
</htm]> 





4.5.1 在 这 个 例子 中 ，cite 元 素 标记 的 是 音乐 
专辑 、 电 影 、 图 书 和 艺术 作品 的 标题 ( 注意 : 最 后 
一 个 例子 中 的 lang="it" 表明 cite 文本 的 语言 是 
意大利 语 ) 
各所 个 Indicating a Citation 
re 站 蕊 itation "n 


日 i 
| 人 = 一 


He listened to Abbey Road While watching A Hard 


Day's Night and reading The Bearles Anrhoiogy. 


When he went to The Louvre, he learned that Mona Lisa 
is also known as La Gioconada. 





4.5.2 ”cite 元 素 默 认 以 斜体 显示 


引用 参考 的 步骤 

(1) 输入 <cite>。 

(2) 输入 参考 的 名 称 。 
(3) 输入 </cite>。 
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对 于 要 从 引用 来 源 中 引述 内 容 的 情 
况 ， Ep. blockquote 或 q 元 素 标记 引述 的 文 
本 (参见 4.6 节 )。 要 和 弄 清 楚 的 是 ，cite 只 
用 于 参考 源 本 身 ， 而 不 是 从 中 引述 的 内 容 。 


HTML5 与 使 用 cite 元 素 表 示 名 称 
HTMLS 声明 ， 不 应 使 用 cite 作为 对 
人 名 的 引用 (这 是 开发 社区 众多 意见 分 歧 中 
的 一 个 ) ,但 HTIML 以 前 的 版 本 允许 这 样 做 ， 
而 且 很 多 设计 和 开发 人 员 仍 在 这 样 做 。 
HTMIL4 的 规范 有 以 下 例子 (已 将 元 素 
名 称 由 大 写字 母 改 为 小 写 ) : 
As <cite>Harry S. Truman</cite> said, 


<q lang="en-us">The buck stops here.</q> 

除了 这 些 例 子 ， 有 的 网 站 经 常用 cite 
标记 在 博客 和 文章 中 发 表 评 论 的 访问 者 的 
名 字 ( WordPress 的 默认 主题 就 是 这 样 做 的 )。 

很 多 开发 人 员 表 示人 他们 将 继续 对 与 页 
面 中 的 引文 有 关 的 名 称 使 用 cite， 因 为 
HTMLS 没有 提供 他 们 认为 可 接受 的 其 他 
元 素 ( 即 span 和 bb 元 素 ) 。Jeremy Keith 
提供 了 一 个 很 好 的 例子 ， 见 http://24ways. 
org/2009/incite-a-riot/。 


4.6 引述 文本 


有 两 个 特殊 的 元 素 用 以 标记 引述 的 文 
本 。blockquote 元 系 表 示 单 独 存 在 的 引述 ( 通 
常 更 长 ， 但 也 可 能 不 是 ) ， ee 
图 4.6.2， 它 默认 显示 在 新 的 一 行 ， 如 图 4.6.3 
et enn 
面 的 引述 (图 4.6.4)。 














图 灵 社 


<body> 


<p>He especially enjoyed this selection from 
<cite>The Adventures of Huckleberry Finn 
</cite> by Mark Twain:</p> 


<blockquote cite="http://www. 
marktwainbooks.edu/the-adventures-of- 
huckleberry-finn/"> 
<p>We said there warn't no home like a 
raft, after all. Other places do seenm 
so cramped up and smothery, but a 
raft don't. You feel mighty free and 
easy and comfortable on a raft.</p> 
</blockquote> 


<p>It reminded him of his own youth exploring 
the county by river in the summertime.</p> 


</body> 
</htm]> 








图 4.6.1 根据 需要 ，blockquote 可 长 可 短 。 可 以 
包含 cite 属性 (不 要 与 第 一 段 中 出 现 的 cite 元 素 





混 靖 ) 提供 引述 文本 的 位 置 


<figure> 
<blockquote> 
I want all my senses engaged. Let 
me absorb the world's variety and 


uniqueness. 
</blockquote> 
<figcaption>— Maya Angelou</figcaption> 
</figure> 








4.6.2 ”如 果 要 添加 署名 ， 署 名 应 该 放 在 blockquote 
外 面 。 可 以 把 署名 放 在 p 里 面 ， 不 过 使 用 figure 
和 figcaption 可 以 更 好 地 将 引述 文本 与 其 来 源 关 
联 起 来 ， 如 下 所 示 ( 参见 4.5 节 ) 

浏览 大 应 对 q 元 又 中 的 文本 目 动 加 上 特 
定语 言 的 引号 ， 但 不 同 浏览 万 的 效果 并 不 相 
同 (参见 图 4.6.5 ) 。 一 定 要 阅读 本 节 提 示 ， 
了 解 q 元 素 的 替代 方法 。 
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Duoting Text 


Quoting Text 


He especially enioyed this selection from The Advenitures of 
Huckieberry Finn by Mark Twain: 


We said there warn't no home like a raft, after 
all, Other places do seem so cramped up and 
siriothery, but a raft dont. YOU ieel mighty free 
and easy and comfortable on a raft. 
It reminded him of his own youth exploring the county by 
river in the summertime. 


4.6.3 浏览 大 默认 对 blockquote 文本 进行 缩 进 ， 
cite 属性 的 值 则 不 会 显示 出 来 (对 此 ， 参 见 第 二 
条 提示 中 的 推荐 做 法 ) 。 不 过 ， 所 有 的 浏览 右 都 支 
持 cite 元 素 ， 通常 对 其 中 的 文本 以 斜体 显示 ， 如 
图 所 示 。 所 有 这 些 默认 样式 都 可 以 被 CSS 禾 亲 








<body> 


<p>And then she said, <q>Have you read 
* Barbara Kingsolver's <cite>High Tide in 
» Tucson</cite>? It's inspiring.</q></p> 


<p>She tried again, this time in French: 

; <q lang="fr">Avez-vous lu le livre <cite 
>»1lang="en">High Tide in Tucson</cite> de 

» Kingsolver? C'est inspirational.</q></p> 


</body> 
</html> 


图 4.6.4 ”这 里 是 两 个 9q 的 例子 。 如 果 引 述 文本 的 
语言 与 页 面 默认 语言 (通过 html 元 素 的 lang 属性 
指定 ) 不 同 ， 就 在 q 元 素 中 加 上 lang 属性 


1. 引述 块 级 文本 的 步 又 

(1) 输入 <blockquote 开 始 一 个 块 级 引述 。 

(2) 如 果 需 要 ， 输 入 cite="wr1"， 其 中 
url 为 引述 来 源 的 地 址 。 

(3) 输入 > 以 结束 开始 标签 。 

(4) 输入 和 希望 引述 的 文本 ， 并 用 段 洛 等 适 
当 的 元 素 包 围 。 

(5) 输入 </blockquote>。 











人 httpy/htmlcssvq. 内 > 区 上 旨 站 Quoting Tet 


And then she said. Have you read Barbara Kingsolver's 
High Tide int Tucson? It's mspiring.™ 


She tried again. this time in French: « Avez-vous lu le livre 
High Tide in Tucson de Kingsolver? C'est 1nspirational. » 


Quoting Text 


And then she said, “Have you read Barbara Kingsolver's 
High Tide in Tucson? It's inspiring.” 


She tried again this time in French: “Avez-vous Iu le livre 
High Tide in Tucson de Kingsolyer? C'est inspirational.” 








图 4.6.5 
语言 的 引号 。 在 这 个 例子 中 ， 这 意味 着 喘 文 和 法 文 
分 别 使 用 不 同 的 引号 。 正 (上 图 ) 和 Chrome 的 处 
理 是 正确 的 。Firefox (下 图 ) 对 英文 的 处 理 是 正确 
的 ， 而 法 文 则 不 正确 。Opera 和 Safari 对 两 种 语言 
的 处 理 都 不 正确 , 它们 都 显示 直 引 号 (包括 法 文 ) 。 
这 样 的 不 一 致 影响 了 q 元 每 的 有 效 性 























2. 引述 行内 文本 的 步骤 

(1) 输入 <q 开始 引述 字 词 或 短语 。 

(2) 如 果 需 要 ， 输 入 cite="vr7"， 其 中 wrI 
为 引述 来 源 的 地 址 。 

(3) 如 果 引 述 内 容 的 语言 与 页 面 默认 语言 
(通过 html 元 系 的 lang 属性 指定 ) 不 同 ， 输 
人 lang="xx"， 其 中 xx 是 引述 内 容 语 言 的 两 
个 字母 的 代码 。 这 个 代码 用 于 判断 需要 使 用 
的 引号 的 类 型 ( 英语 为 ""， 而 很 多 欧洲 语言 
则 为 > ) ， 但 浏览 器 对 引号 的 呈现 方式 可 能 
不 同 。 

(4) 输入 > 以 结束 开始 标签 。 

(5) 输入 要 引述 的 文本 。 








(6) 输入 </q>。 
如 果 blockquote 中 仅 包 含 一 个 单独 的 


段落 或 短语 ， 可 以 不 必 将 其 包 在 p 中 再 放 入 
blockquote。 
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可 以 对 blockquote 和 9q 使 用 可 选 的 
i 内 容 来 源 的 URL。 尽 管 
浏览 器 通常 不 会 将 cite 的 URL 呈现 给 用 户 
(参见 图 4.6.3 ) ， 但 理论 上 讲 ， 该 属性 对 搜 
索引 苟 或 其 他 收集 引述 文本 及 其 引用 的 自动 
化 工具 来 说 还 是 有 用 的 。 如 果 要 让 访问 者 看 
到 这 个 URL， 可 以 在 内 容 中 使 用 链接 (a 元 
素 ) 重复 这 个 URL。 也 可 以 使 用 JavaScript 
将 cite 的 值 暴露 出 来 (可 以 从 网 上 搜 到 示例 


代码 ) ， 但 这 样 做 的 效果 稍 差 一 些 。 
BB q 元 素 引 用 的 内 容 不 能 跨越 不 同 的 段 
落 ， 在 这 种 情况 下 应 使 用 blockquote。 


不 要 仅仅 因为 需要 在 字 词 两 端 添加 
引号 就 使 用 q。 例 如 ， 
the word <q>soy</q>, I jump for joy.</p> 是 
不 正确 的 , 因为 Soy 并 不 是 对 某 参 考 源 的 引用 。 


<p>Every time I hear 


blockquote 和 qq 元 素 可 以 吝 套 。 例 
如 ,《p>The short story began, <q>When 
she was a child, she would say, <q>Howdy, 
stranger!</q> to everyone She passed.</q> 
《</p>。 详 套 的 q 元 素 应 该 自动 加 上 正确 的 引 
号 (例如 ， 在 英语 中 外 面 的 是 双 引 号 ， 里 面 
的 是 单 引号 ) 。 由 于 内 外 引号 在 不 同 语言 中 
的 处 理 方 式 不 一 样 ， 因 此 要 根据 需要 在 q 元 
素 中 加 上 lang 属性 (参见 图 4.6.4) 。 不 幸 的 
是 ,浏览 器 对 误 套 9 元 素 的 支持 程 度 并 不 相同 ， 

， 览 器 对 非 误 套 q 元 素 的 支持 也 不 同 ( 参 

0 


由 于 gq 元 素 的 跨 浏览 器 问题 (参见 
ee 
避免 使 用 gq 元 素 ， 而 是 选择 直接 输入 正确 的 
引号 或 使 用 字符 实体 。 
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4.7 指定 时 间 


我 们 可 以 使 用 time 元 素 标 记 时 间 、 日 期 或 
时 间 段 ， 这 是 HIMLS 新 增 的 元 素 。 呈 现 这 些 
下 言 县 的 方式 有 多 种 ， 之 参见 图 4.7.1 至 图 ge 








<body> 


<p>The train arrives at <time>08:45</time> 
‘and <time>16:20</time> on <time> 
2017-03-19</time>.</p> 


<p>They made their dinner reservation for 
‘<time datetime="2013-11-20T18:30:00"> 
‘tonight at 6:30</time>.</p> 


<p>We began our descent from the peak of 
‘Everest on <time datetime="1952-06-12T 
11:05:00">June 12, 1952 at 11:05 a.m. 
</time></p> 


<p>The film festival is <time datetime= 
"2014-07-13">July 13</time>-<time 
‘ datetime="2014-07-16">16</time>.</p> 


<1-- 不 包含 年 份 的 例子 --》 
<p>Her birthday is <time datetime="03-29"> 
March 29th</time>.</p> 


<!-- 时 间 段 的 例子 --> 

<p>The meeting lasted 《time>2h 41m 3s 
</time> instead of the Scheduled 《time 
‘datetime="2h 30m >two hours and thirty 
minutes</time>.</p> 


</body> 
</html> 





4.7.1 如 第 一 个 例子 所 示 ，time 元 素 最 简单 的 
用 法 是 不 包含 datetime 属性 。 在 忽略 datetime 属 
性 的 情况 下 ， 它 们 的 确 提 供 了 具备 有 将 的 机 顺 可 该 
格式 的 时 间 和 日 期 。 在 其 余 的 例子 中 ， 由 于 提供 了 
datetime 属性 ，time 标签 中 的 文本 并 未 严格 使 用 
有 效 的 格式 


time 中 包含 的 文本 内 容 ( 即 <time>text 
</time> ) 会 出 现在 屏幕 上 ， 对 用 户 可 见 ( 参 
多 图 4.7.2 和 图 4.7.4) ， 而 可 选 的 datetime 
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属性 则 是 为 机 需 准 备 的 。 该 属性 需要 遵循 特 
定 的 格式 ， 本 市 后 面 的 补充 材料 “理解 有 效 
的 时 间 格 式 ” 说 明了 相关 的 基本 知识 ， 第 一 
条 提示 则 说 明了 为 一 种 格式 要 求 的 特定 情形 。 








Specifying Time 
Specifying Time 


The train arrives at 08:43 and 16:20 on 2017-03-19. 
They made their dinner reservation for tonight at 6:30. 


We began Our descent from the peak of Everest on 
June 12, 1952 at 11:05 a.m. 


The film festival is July 13-16. 
Her birthday is March 29h. 


The meeting lasted 2h 41m 3s instead of the 
scheduled two hours and thirty minutes. 








4.7.2 ”浏览 器 只 显示 time 元 素 的 文本 内 容 ， 而 
不 会 显示 datetime 的 值 


<body> 


<article> 
<h1>Cheetah and Gazelle Make Fast 
小 Friends</h1> 
<p><time datetime="2014-10-15">October 
15， 2014</time></p> 


。 [文章 内 容 ] ... 
</articley> 


</body> 
</htm]> 





图 4.7.3 这 里 展示 了 如 何在 博客 或 新 闻 文 章 中 包 
含 日 期 。datetime 属性 中 的 值 表 示 的 是 文本 内 容 的 
机 器 可 读 格 式 


指定 准确 时 间 、 日 期 或 时 间 段 的 步骤 

(1) 输入 <time 开始 time 元 素 。 

(2) 如 果 需 要 ,输入 datetime="time"， 其 
中 time 表示 的 是 第 (4) 步 中 文本 的 机 各 可 读 
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格式 (参见 补充 材料 “理解 有 效 的 时 间 格 式 ”)。 

(3) 输入 > 结束 开始 标签 。 

(4) 输入 要 显示 在 浏览 器 中 的 表示 时 间 、 
日 期 或 时 间 段 的 文本 ( 如 果 第 (2) 步 中 没有 包 
含 datetime 属性 ， 参 见 第 一 条 提示 ) 。 

(5) 输入 </time>。 


Fr- 


Specifying Time 
Specifying Time 


Cheetah and Gazelle Make Fast Friends 





October 15, 2014 


... [article content] ... 











图 4.7.4” 恰 如 预 期 ,日 期 显示 在 标题 的 下 方 

如 果 和 忽略 datetime 属性 ， 文 本 内 容 
就 必须 是 合法 的 日 期 或 时 间 格 式 。 也 就 是 
说 ， 图 4.7.1 中 的 第 一 个 例子 不 能 写成 <p>The 
train arrives at <time>8:45 a.m.</time> 
and <time>4:20 p.m.</time> on <time>April 
20th, 2015</time>.</p>, 为 这 三 处 time 
文本 的 格式 都 不 正确 。 不 过 ， 如 果 和 包含 了 
datetime， 文本 内 容 就 可 以 按 你 希望 的 任何 形 
式 表 示 日 期 、 时 间或 时 间 段 了 ， 就 像 图 4.7.1 
中 的 其 他 例子 那样 。 


datetime 属性 不 会 单独 产生 任何 效 
果 , 但 它 可 以 用 于 在 Web 应 用 (如 日 历 应 用 ) 
之 间 同 步 日 期 和 时 间 。 这 就 是 必须 使 用 标准 
的 机 器 可 读 格 式 的 原因 ， 这 样 ， 程 序 之 间 就 
可 以 使 用 相同 的 “语言 ”来 共享 信息 。 


本 了 园 不 能 在 time 元 素 中 吝 套 另 一 个 time 
元 素 ， 也 不 能 在 没有 datetime 属性 的 time 元 
素 中 包含 其 他 元 素 ( 只 能 包含 文本 ) 。 
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在 早期 的 HTML5 说 明 中 ，time 元 素 可 以 包含 一 个 名 为 pubdate 的 可 选 属性 (要 知道 ， 
HTML 这 门 语言 还 在 不 断 地 向 前 发 展 ) 。 不 过 ，pubdate 已 不 再 是 HTMLS 的 一 部 分 。 在 这 里 提 
到 这 个 属性 是 为 了 让 你 偶然 在 较 早 的 教程 或 书 ( 如 本 书 的 第 7 版 ) 中 碰 到 该 属性 时 不 必 犹 隐 是 否 
应 该 使 用 它 ( 当然 不 应 该 使 用 ) 。 


理解 有 效 的 时 间 格 式 

datetime 属性 (或 者 没有 datetime 属性 的 time 元 素 ) 必须 提供 特定 的 机 器 可 读 格 式 的 
日 期 和 时 间 。 这 可 以 简化 为 下 面 的 形式 : 

YYYY-MM-DDThh:mm:ss 

例如 (当地 时 间 ) : 

1985-11-03T17:19:10 

示 “ 当 地 时 间 1985 年 11 月 3 日 下 午 5 时 19 分 10 秒 ”。 小 时 部 分 使 用 24 小 时 制 ， 因 此 表 

示 下 午 5 点 应 使 用 17 而 非 05。 如 果 和 包含 时 间 ， 秒 是 可 选 的 。 (也 可 以 使 用 hh:mm.sss 格式 提 
供 时 间 的 毫秒 数 。 注 意 毫 秒 数 之 前 的 符号 是 一 个 点 。) 

如 果 要 表示 时 间 段 ， 则 格式 稍 有 不 同 。 有 好 几 种 语法 ， 不 过 最 简单 的 形式 为 : 

nh nm ns 
(其 中 ,三 个 n 分 别 表示 小 时 数 、 分 钟 数 和 秒 数 。) 

图 4.7.1 中 的 最 后 一 个 例子 就 是 表示 时 间 段 的 实例 。 

@ 全 球 日 期 和 时 间 及 时 差 

你 也 可 以 将 日 期 和 时 间 表 示 为 世界 时 。 在 末尾 加 上 字母 2， 就 成 了 UTC (Coordinated 
Universal Time， 全 球 标准 时 间 ) 。UTC 是 主要 的 全 球 时 间 标 准 。 ( 参见 https://en.wikipedia. 
org/wiki/Coordinated_Universal Time。 ) 

例如 (使 用 UTC 的 世界 时 ) : 

1985-11-03T17:19:10Z 
也 可 以 通过 相对 UTC 时 差 的 方式 表示 时 间 。 这 时 不 写字 母 Z, 写 上 -( 减 ) 或 +( 加 ) 及 时 差 即 可 。 

例如 ( 含 相 对 UTC 时 差 的 世界 时 ) : 

1985-11-03T17:19:10-03:30 
表示 “ 纽 芬兰 标准 时 (NST) 1985 年 11 月 3 日 下 午 5 时 19 分 10 秒 ”(NST 比 UTC 晚 3 个 半 
小 时 ) 。UTC 时 区 列表 参见 http:Wen.wikipedia.org/wiki/List_of time_zones_by_UTC offset。 

提醒 一 下 , 如果 确实 要 包含 datetime, 也 不 必 像 图 4.7.1 中 的 示例 那样 提供 时 间 的 完整 信息 。 
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缩写 词 很 常见 ， 如 开 、M.D.， 甚 至 good 
ol'HTML。 可 以 使 用 abbr 元 系 标 记 缩 写 词 并 
解释 其 含义 (图 4.8.1 至 图 4.8.3 ) 。 不 必 对 每 
个 缩写 词 都 使 用 abbr， 只 在 需要 帮助 访问 者 
了 解 该 词 含 义 的 时 候 使 用 。 








<body> 


<p>The <abbr title="National Football 
; League">NFL</abbr> promised a <abbr 

» title="light amplification by 

» stimulated emission of radiation"> 
" laser</abbr> show at 9 p.m. after every 
> night game.</p> 


<p>But, that's nothing compared to what 

» <abbr>MLB</abbr> (Major League 

» Baseball) did. They gave out free 

* <abbr title="self-contained underwater 
>» breathing apparatus">scuba</abbr> gear 
» during rain delays.</p> 


</body> 
</html> 





4.8.1 使 用 可 选 的 title 属性 提供 缩写 词 的 全 
称 。 男 外 ， 也 可 以 将 全 称 放 在 缩写 词 后 面 的 括号 里 
( 这 样 做 或 许 更 好 ), 还 可 以 同时 使 用 这 两 种 方式 ， 
并 使 用 一 致 的 全 称 。 对 于 像 laser( 激光 )、scuba( 水 
中 呼吸 器 ) 这 样 的 词汇 ， 大 多 数 人 都 很 熟悉 了 ， 
此 其 实 并 无 必要 对 它们 使 用 abbr 并 提供 title， 这 

里 只 是 用 它们 来 演示 示例 
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But, that's nothing compared to what MLB (Major League Baseball) did. 
They gave out free scuba gear during rain delays. 


4.8.2 ” 当 缩 写 词 有 title 属性 时 ，Firefox 和 
Opera 会 添加 虚线 下 划 线 以 引起 注意 。 可 以 通过 
CSS 让 其 他 浏览 需 也 这 样 显 示 (参见 提示 ) 





解释 缩写 词 的 步骤 

(1) 输入 <abbr。 

(2) 作为 可 选 的 一 步 ， 输 入 title="expan- 
sion"， 其 中 expansion 是 缩写 词 的 全 称 。 

(3) 输入 >。 

(4) 然后 输入 缩写 词 本 身 。 

(5) 最 后 输入 </abbr> 结束 标签 。 

(6) 作为 可 选 的 一 步 ， 输 入 一 个 空格 和 
(expansion), 其 中 expansion 是 缩写 词 的 全 称 。 


通常 ， 仅 在 缩写 词 第 一 次 出 现在 屏幕 
上 时 给 出 其 全 称 ( 通 过 title 或 括号 的 方式 ) 。 








用 括号 提供 缩写 词 的 全 称 是 解释 缩写 
词 最 直接 的 方式 ， 能 让 尽 可 能 多 的 访问 者 看 
到 这 些 内 容 (图 4.8.1) 。 例如， 使 用 智能 

机 和 平板 电脑 等 触摸 屏 设 备 的 用 户 可 能 无 法 
移 到 abbr 元 素 上 查看 title 的 提示 框 。 因 此， 
如 果 要 提供 缩写 词 的 全 称 ， 应 该 尽量 将 它 放 
在 括号 里 。 


如 果 使 用 复数 形式 的 缩写 词 ， 全 称 也 
要 使 用 复数 形式 。 


作为 对 用 户 的 视觉 提示 ，Firefox 和 
Opera 等 浏览 器 会 对 市 title 的 abbr 文字 使 用 
虚线 下 划 线 (图 4.8.2) 。 想 在 其 他 浏览 器 中 
也 这 样 显示 ,可 以 在 样式 表 中 加 上 这 条 语句 : 
abbr[title|] { border-bottom: 1px dotted 
#000; }。 无 论 abbr 是 否 添 加 了 下 划 线 样式 ， 
浏览 器 都 会 将 title 属性 内 容 以 提示 框 的 形式 
显示 出 来 【图 4.8.3 ) 。 


如 果 看 不 到 abbr 有 虚线 下 划 线 ， 试 
着 为 其 父 元 素 的 CSS 添加 1line-height 属性 
(参见 第 10 章 ) 。 
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在 HTML5 之 前 有 acronym ( 首 字 母 


缩写 词 ) 元 素 ， 但 设计 和 开发 人 员 常 常 分 不 
清楚 缩写 词 和 首 字母 缩写 词 ， 因 此 HIMLS 废 
除了 acTonym 元 素 , 让 abbTr 适 用 于 所 有 的 场合 。 


1Abbreviations 


WO 





i 
区 


所 CC [| htmlcssvqs.com/examples/chapter-04/abbr 





The NFL promised a laser Show at 9 p.m. after every night game， 


But, that's nothing compared to what MLB (Major League Baseball) did. 
They gave out free scubh gear during rain delays， 


self-contained underwater breathing apparatus 





图 4.8.3” 当 访问 者 将 鼠标 移 至 abbr 上 ， 该 元 素 
title 属性 的 内 容 就 会 显示 在 一 个 提示 框 里 ( 这 里 
还 显示 ， 在 默认 情况 下 ，Chrome 等 一 些 浏览 器 不 
会 让 市 有 title 属性 的 缩写 词 跟 普 通 文本 有 任何 显 
示 上 的 差别 ) 





4.9 定义 木 语 

在 印刷 物 中 ， 首 次 定义 术语 通 和 常会 对 其 
添加 区 别 于 其 他 文本 的 格式 ( 英文 通常 为 斜 
体 ， 汉 语 通 常 为 黑体 或 者 楷体 ) ， 在 其 后 提 
到 术语 时 则 不 再 使 用 特殊 格式 。 

在 HIML 中 定义 术语 时 ， 可 以 使 用 dfn 
元 素 对 其 作 语 义 上 的 区 分 。 仅 用 dfn 包围 要 
定义 的 术语 ,而 不 是 包围 定义 ,如 图 4.9.1 所 示 。 
同 印 刷 物 的 惯例 一 样 ， 后 续 使 用 术语 时 不 下 
需要 使 用 dfn 对 其 进行 标记 ， 因 为 不 再 需要 
对 其 进行 定义 。 (在 HTML 中 ， 定 义 术语 的 
地 方 称 为 “术语 的 定义 实例 ”。 ) 


标记 术语 的 定义 实例 























(1) 输入 <dfn>。 
(2) 输入 要 定义 的 术语 。 
(3) 输入 </dfn>。 


<body> 


<p>The contestant was asked to spell 
“pleonasm. She requested the definition 
and was told that <dfn>pleonasm</dfn> 
means "a redundant word or expression" 
(Ref: <cite><a href="http://dictionary. 
reference.com/browse/pleonasm" rel= 
"external">dictionary.com</a></cite>).</p> 


</body> 
</htm]> 





4.9.1 注意 ， 在 这 个 例子 中 ， 尽 管 pleonasm 出 
现 了 两 次 ， 但 只 对 第 二 个 用 dfn 进行 了 标记 ， 因 为 
那 时 才 定 义 这 个 术语 〈 即 定义 实例 ) 。 类 似 地 ， 如 
果 我 在 文档 后 面 用 到 pleonasm, 也 不 会 用 dfn 标记 ， 
因为 我 已 经 定义 过 它 了 。 尺 管 浏览 紫 在 默认 情况 
下 会 为 dfn 文本 加 上 与 普通 文本 不 同 的 样式 (参见 
图 4.9.2 ) ， 但 重要 的 是 术语 使 用 了 特殊 的 标记 。 
同时 ， 不 必 在 每 次 使 用 dfn 时 都 使 用 cite 元 素 ， 
该 元 系 只 在 引用 参考 源 的 时 候 使 用 














Defining Instamce of aTerm 


Defining lnstance of a Term 





The contestant was asked to spell "pleonasm. She requested 
the definition and was told that pleonasm means "a redundant 
Word or expression” (Ref dictionary.com). 





图 4.9.2 通常 ,dfn 元素 默认 以 和 斜体 显示 ， 与 
cite 一 样 


术语 及 其 定义 应 位 置 相近 

由 dfn 标记 的 术语 与 其 定义 的 距离 远 
近 相 当 重 要 。 如 HTMLS 规范 所 述 ， “如 
果 一 个 段落 、 描 述 列表 或 区 块 是 某 dfn 元 
素 距 离 最 近 的 祖先 ， 那 么 该 段落 、 描 述 列 
表 或 区 块 必须 包 含 该 术语 的 定义 。” 简 言 之 ， 
dfn 元 素 及 其 定义 必须 挨 在 一 起 ， 否 则 便 是 
错误 的 用 法 。 图 4.9.1 和 第 四 条 提示 中 的 例 
子 都 遵循 这 一 规则 一 一 dfn 及 其 定义 位 于 同 
0 
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还 可 以 在 描述 列表 (元素) 中 使 用 
dfn， 参 见 第 15 章 。 


仅 在 定义 术语 时 使 用 dfn， 而 不 能 
为 了 让 文字 以 斜体 显示 就 使 用 该 元 素 。 使 用 
CSS 可 以 将 任何 文字 变 为 斜体 (参见 10.4 节 )。 


dfn 可 以 在 适当 的 情况 下 包 住 其 他 的 
短语 元 素 ， 如 abbr。 例如 ，<p>A <dfn><abbr 
title= Junior >JT.</abbr></dfn> is a son 
with the same full name as his father.</p>。 


如 果 在 dfn 中 添加 可 选 的 title 属性 ， 
其 值 应 与 dfn 术语 一 致 。 正 如 在 上 一 条 提示 
中 看 到 的 ， 如 果 只 在 dfn 里 嵌 套 一 个 单独 的 
abbr, dfn 本 身 没 有 文本 ， 那 么 可 选 的 上 title 
只 能 出 现在 abbr 里 。 


4.10 创建 上 标 和 下 标 


比 主 体 文 本 稍 高 或 稍 低 的 字母 或 数字 分 
别称 为 上 标 和 下 标 ( 参见 图 4.10.1 ) 。HTML 
包含 用 来 定义 这 两 种 文本 的 元 素 。 常 见 的 上 
标 包 括 商 标 符 号 、 指 数 和 脚注 编号 等 (参见 
图 4.10.2 ) ; 常见 的 下 标 包 括 化 学 符号 等 。 


创建 上 标 和 下 标的 步 又 

(1) 输入 <sub> 创建 下 标 ， 或 输入 <sup> 
创建 上 标 。 

(2) 输入 要 出 现在 下 标 或 上 标 里 的 字符 或 
符号 。 

(3) 根据 第 (1) 步 中 使 用 的 元 系 ， 输 入 
</sub> 或 </sup> 结束 该 元 素 。 


大 多 数 浏览 器 会 自动 将 上 标 或 下 标 文 
字 的 字号 减少 几 磅 。 
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<body> 


<article> 
<h1>Famous Catalans</h1> 
<p>... Actually, Pablo Casals' real 
name was <i>Pau¢/i> Casals, Pau 
» being the Catalan equivalent of Pablo 
> <a href="#footnote-1" title="Read 
footnote 1"><sup>1</sup></a>.</p> 


<p>... Pau Casals is remembered in this 

» country for his empassioned speech 
> against nuclear proliferation at the 

» United Nations <a href="#footnote-2" 
> title="Read footnote 2"><sup>2</sup> 
>? </a> ...</p> 


<footer> 
<p id="footnote-1"><sup>1</sup>It 
» means Paul in English.</p> 
<p id="footnote-2"><sup>2</sup>In 
> 1963, I believe.</p> 
</footer> 
</article> 


</body> 
</html> 








图 4.10.1 ”sup 元 条 的 一 种 用 法 就 是 表示 脚注 编号 。 
根据 从 属 关 系 , 我 将 脚注 放 在 article 的 footer 里 ， 
而 不 是 整个 页 面 的 footer 里 。 我 还 为 文章 中 每 个 
脚注 编号 创建 了 链接 , 指向 footer 内 对 应 的 脚注 ， 
从 而 让 访问 者 更 容易 找到 它们 。 同 时 ， 注 意 链 接 中 
的 title 属性 也 提供 了 一 些 提 示 








SAQ Creating Superscripts 
Creating Superscripts | 








Famous Catalans 


When I was in the sixth grade, I played the cello. There was a teacher 
at School who always used to ask me if I knew who "Pablo Casals" 
was. I didn't at the time (although I had met Rostropovich once at a 
concert)}. Actually, Pablo Casals' real name Was Pau Casals, Pau being 


the Catalan eguivalent of PabloL 


In addition to being an amazing cellist, Pau Casals is remembered in 
this country for his empassioned speech against nuclear proliferation 
at the United Nations? which he began by saying "I am a Catalan. 
Catalonia is an oppressed nation." 


1Tt means Paul in Eneglish. 


21n 1963, 1 believe, 





4.10.2 sup 元素 的 位 置 比 同一 行 的 文本 要 高 。 
不 过 ， 不 好 的 一 点 是 ， 它 们 会 扰乱 行 间距 (人 参见 最 
后 一 条 提示 ) 
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上 标 是 对 某 些 外 语 缩写 词 进行 格式 上 标 和 下 标 字 符 会 轻微 地 扰乱 行 人 行 


和 例如 ， 法 语 中 用 M“ "表示 例如 ， 在 图 4.10.2 中 ， 

Mademoiselle ( 小 姐 ) ， 西 班 牙 语 中 用 3* 表 一 段 第 4 行 和 第 5 行 之 间 的 距离 以 及 第 三 
示 tercera (第 三 ) 。 此 外 ， 一 些 数字 形式 也 第 2 行 和 第 3 行 之 间 的 距离 比 其 他 行 间 距 要 
要 用 到 上 标 ， 如 2™、5"。 大 一 些 。 不 过 ， 可 以 使 用 一 些 CSS 解决 这 个 


问题 。 解 决 的 办 法 参见 “修复 使 用 sub 和 sup 
下 标 适用 于 化 学 分 子 式 (如 HJO) 。 ”时 的 行 间距 问题 。 

例如 ，《p>Im parched. Could I please have 

a glass of H<sub>2</sub>0?</p>.。 


修复 使 用 sub 和 sup 时 的 行 间 距 问 题 
sub 和 sup 元 素 会 轻微 地 增 大 行 高 。 幸 好 ， 用 一 点 CSS 就 可 以 修复 这 个 问题 。 下 面 的 
代码 来 自 Nicolas Gallagher 和 Jonathan Neal 出 色 的 normalize.css (http://necolas.github.com/ 
normalize.css/ ) 。 下 面 的 方法 并 不 是 他 们 发 明 的 ， 他 们 借用 了 https://gist.github.com/413930 里 
的 代码 并 去 掉 了 注释 。 上 面 这 个 GitHub 的 链接 里 包含 了 对 这 一 段 CSS 的 详细 解释 ， 建 议 你 
2 
同时 ， 你 可 以 在 自己 的 项 目 里 使 用 normalize.css， 推 荐 你 下 载 这 个 文件 。 该 文件 可 以 帮 
你 建立 一 个 跨 浏 览 器 的 统一 基准 样式 表 ， 其 文档 也 很 详尽 (参见 11.4 节 )。 
et 
* 在 所 有 浏览 器 中 防止 sub 和 sup 有 影响 Line-height 
* gist.github.com/413930 
sub, 
sup { 
font-size: 75%; 
line-height: 0; 
position: relative; 
vertical-align: baseline; 
) 
sup { 
[Op =0.5enm; 
} 
sub { 
bottom: -0.25em; 


你 可 外 2 TA 
代码 至 少 已 经 为 你 建立 了 很 好 的 起 点 。 关 于 如 何 创建 样式 表 并 将 CSS 添 加 到 网 站 ,参见 第 8 章 。 
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4.11 添加 作者 联系 信息 


你 或 许 以 为 address 元 素 是 用 于 标记 通讯 
地 址 的 , 但 其 实 并 非 如 此 (有 一 种 例外 的 情况 ， 
参见 第 一 条 提示 ) 。 实 际 上 ， 没 有 专门 用 于 
标记 通讯 地 址 的 HTML 元 素 。 

| 
HTML 页 面 或 页 面 一 部 分 (如 一 篇 报告 或 新 
文章 ) 有 关 的 作者 、 相 关 人 士 或 组 织 的 联系 
信息 ， 通 常 位 于 页 面 底部 或 相关 部 分 内 ( 参 
见 图 4.11.1 和 图 4.11.2 ) 。 至 于 address 具体 
表示 的 是 哪 一 种 信息 ， 取 决 于 该 元 素 出 现 的 
位 置 。 下 面 的 第 (1) 步 中 对 每 一 种 场景 都 做 了 
摘 述 。 


提供 作者 联系 信息 

(1) 如 果 要 为 一 个 article 提供 作者 联系 
信息 ， 就 将 光标 放 在 该 元 素 内 (参见 图 4.11.1 
中 第 一 个 例子 ) 。 如 果 要 提供 整个 页 面 的 作 
者 联系 信息 ， 就 将 光标 放 在 body 中 (更 篆 
见 的 做 法 是 放 在 页 面 级 的 footer 里 ) ,参见 
图 4.11.1 中 第 二 个 例子 。 

(2) 输 入 <address>。 

(3) 输入 作者 的 电子 邮件 地 址 、 指 向 联系 
言 息 页 的 链接 等 。 
































(4) 输入 </address>。 


pd 
接 。 联 系 信息 也 有 可 能 是 作者 的 通讯 地 址 ， 

这 时 将 地 址 用 address 标记 就 是 有 效 的 。 但 
是 用 address 标记 公司 网 站 “联系 我 们 ”页 


面 中 的 办 公 地 点 ， 则 是 错误 的 用 法 。4.16 节 
中 提供 了 一 种 标记 通讯 地 址 (街道 地 址 ) 的 
方法 。 
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<body> 
<main role="main"> 
<article> 
<h1>Museum Opens on the Waterfront</h1> 
<p>The new art museum not only 
introduces a range of contemporary 
works to the city, it's part of 
larger development effort on the 
waterfront.</p> 


， [故事 内 容 的 其 余部 分 ] .…. 


《1-- 文章 的 页 脚 , 其 中 包含 文章 的 地 址 信息 --> 
<footer> 
<p>Tracey Wong has written for 
<cite>The Paper of Papers</cite> 
since receiving her MFA in art 
history three years ago.</p> 
<address> 
Email her at <a href="mailto: 
traceyw@thepaperofpapers.com"> 
traceyw@thepaperofpapers.com 
</a>. 
</address> 
</footer> 
</article> 
</main> 


<!-- 页 面 的 页 脚 , 其 中 包含 整个 页 面 的 地 址 信息 --> 
<footer role="contentinfo"> 
<p><small>&copy; 2014 The Paper of 
Papers, Inc.</small></p> 
<address> 
Have a question or comment about the 
site? <a href="site-feedback.html"> 
Contact our web team</a>. 
</address> 
</footeT> 
</body> 
</html> 





4.11.1 这 个 页 面 有 两 个 address 元 系 : 一 个 用 
于 article 的 作者 , 另 一 个 位 于 页 面 级 的 footer 里 ， 
用 于 整 0 注意 article 的 address 

只 包含 联系 信息 。 尽 管 article 的 footer 里 也 有 
关于 Tracey Wong 的 青 景 信息 县， 但 这 些 信 息 是 位 于 
address 元 素 外 面 的 
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Author Contact Infe 
Author Conmntact Info 


Museum Opens on the 
Waterfront 


The new art museunm not only introduces a range 
of contemporary works to the city, it's part of a 
larger development effort on the waterfront. 

,1 [rest of story content|] . . 


Tracey Wong has Written for The Paper of Papers 
since receiving her MFA in Art History three 
Years apo. 


Email her at Iraceyw Bihepaperofpapers.com, 
D014 The Paper of Papers, Ine, 


Have a question or comment abont the site? 
Coniact our web team. 





4.11.2 address 元 素 中 的 文字 默认 以 和 斜体 显示 
( “The Paper of Papers” 也 是 斜体 ， 不 过 这 是 由 于 
它 包含 在 cite 元 素 中 ， 参 见 本 草 4.5 市 ) 


如 果 address 说 套 在 article 里 ， 则 
属于 其 所 在 的 最 近 的 article 元 素 ; 否则 属于 
页 面 的 ee 说 明 整 个 页 面 的 作者 的 联系 信 
息 时 ， 常 将 address 放 在 footer 元素 里 ， 
如 图 4.11.1 中 第 二 个 address 的 实例 。 


ja article 里 的 address 提 供 的 是 该 
article 作者 的 联系 信息 (图 4.11.1)， 
是 庶 套 在 该 article 里 的 其 他 任何 article( 如 
用 户 评论 ) 的 作者 的 联系 信息 。 


address 只 能 包含 作者 的 联系 信息 ， 

二 如 文档 或 文章 的 最 后 
修改 时 间 ( 图 411.1) 。 此 外 ，HTMLS 禁 
止 在 address 里 包含 以 下 元 素 : hl ~ h6、 
article. aside、 header. 


address 、 footer、 


hgroup、nav 和 section。 


图 灵 社 


关于 article 的 footer 元 素 ， 参 见 
第 3 章 。 


4.12 ”标注 编辑 和 不 再 准确 的 文本 


有 时 可 能 需要 将 在 前 一 个 版 本 之 后 对 
页 面 内 容 的 编辑 标 出 来 ， 或 者 对 不 再 准确 、 
不 下 相关 的 文本 进行 标记 。 有 两 种 用 于 标注 
编辑 的 元 素 : 代表 添加 内 容 的 ins 元 素 和 标 
记 已 删除 内 容 的 del 元 素 (参见 图 4.12.1 至 
图 4.12.4 ) 。 这 两 个 元 素 既 可 以 单独 使 用 ， 也 
可 以 一 起 使 用 。 














<body> 


<h1>Charitable Gifts Wishlist</h1> 


<p>Please consider donating one or more 
“of the following items to the village's 
» Community center:</p> 


<U]> 
<li><del>2 desks</del></1i> 
<1i>1 chalkboard</1i> 
<li><del>4 solar-powered tablets 
</del></1i> 
<li><ins>1 bicycle</ins></1i> 
</U]> 


</body> 
</htm]> 





4.12.1 在 这 个 礼品 清单 上 一 次 发 布 之 后 ， 又 增 
加 了 一 个 条 目 (bicycle ), 同时 根据 del 元 素 的 标注 ， 
移 除 了 一 些 已 购买 的 条 目 。 使 用 ins 的 时 候 不 一 定 
要 使 用 del， 反 之 亦 然 。 浏 览 器 通常 会 让 它们 看 起 
来 与 普通 文本 不 一 样 ， 参 见 图 4.12.2 


同时 ，s 元 又 用 以 标注 不 再 准确 或 不 再 相 
天 的 内 容 (一 般 不 用 于 标注 编辑 内 容 ) ， 如 
图 4.12.5 和 图 4.12.6 所 示 。 
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图 4.12.2 


这 些 样式 


Noting Edits 


Noting Edits 


Charitable Gifts Wishlist 


Please consider donating one or more of the following 


items to the village's community center: 


s 二 desks 
a |] chalkboard 


Ee 
=。 bicycle 


浏览 融通 稼 对 已 删除 的 文本 加 上 删除 
线 ， 对 插入 的 文本 加 上 下 划 线 。 可 以 用 CSS 修改 


<body> 


<h1i>Charitable Gifts Wishlist</h1> 
<del> 
<p>Please consider donating one or more 
of the following items to the village's 
community center:</p> 
</del> 


<ins> 
<p>Please note that all gifts have been 
purchased.</p> 
<p>Thank you <em>so much</em> for your 
generous donations!</p> 
</ins> 


<del> 
<U]> 
<li><del>2 desks</del></1i> 
<1i>1 chalkboard</1i> 
<li><del>4 solar-powered tablets 
</del></1i> 
<li><ins>1 bicycle</ins></1i> 
</Ul> 
</del> 


</body> 
</html> 
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Noting Edits 
Noting Edits 






图 4.12.4 与 前 面 类 似 ， 浏 览 如 会 将 删除 或 插入 的 
内 容 标 出 


<body> 


<h1>Today s Showtimes</h1> 
<p>Tickets are available for the following 
times today:</p> 


<01> 
<li><ins>2 p.m. (this show just added!) 
</ins></1i> 
<li><s>5 p.m.</s> SOLD OUT</1i> 
<1li><s>8:30 p.m.</s> SOLD OUT</1i> 
</01> 


</body> 
</htm]> 


图 4.12.5 ”这 个 例子 展示 了 一 个 关于 演出 时 间 的 有 
序列 表 (ol 元 素 ) 。 与 剩余 票数 不 再 相关 的 时 段 
都 用 s 元 素 进 行 了 标记 。 可 以 对 任何 短语 使 用 s， 
而 不 仅 限 于 列表 项 (1i 元素 ) 里 的 文本 。 不 过 ， 
不 要 像 del 和 ins 那样 用 s 标记 整个 段落 或 其 他 块 
级 元 素 











1. 标记 新 插入 文本 


图 4.12.3 del 和 ins 是 少 有 的 既 可 以 包围 短语 内 WA 
容 (HTML5 之 前 称 “ 行 内 元 素 ”) 又 可 以 包围 块 (2) 输入 新 内 容 。 
级 内 容 的 元 素 ， 如 下 面 的 代码 所 示 (3) 输入 </ins>。 
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| Noting Edits and Inaccurate Text 


Today's Showtimes 


Tickets are available for the following times today: 


1. 2pm. (this show just added! 
2. SP SOLD OUT 
3, $30 Fm: SOLD OUT 





4.12.6 ”默认 情况 下 ， 浏 览 需 会 对 s 元 素 添 加 删除 线 


2. 标记 已 删除 文本 

(1) 将 光标 放 在 竺 标记 为 已 删除 的 文本 或 
Hs 

(2) 输入 <del>。 

(3) 将 光标 放 在 竺 标记 为 已 删除 的 文本 或 
元 素 之 后 。 

(4) 输入 </del>。 

3. 标记 不 再 准确 或 不 再 相关 的 文本 

(1) 将 光标 放 在 希望 标记 为 不 再 准确 或 不 
再 相关 的 文本 的 前 面 。 

(2) 输入 <s>。 

(3) 将 光标 放 在 希望 标记 的 文本 的 后 面 。 

(4) 输入 </s>。 


del 和 ins 都 支持 两 个 属性 : cite 和 
datetime。cite 属性 (区 别 于 cite 元 素 ) 用 
于 提供 一 个 URL, 指向 说 明 编 辑 原 因 的 页 面 。 
例如 ,《ins cite= http://www.movienews .Com/ 
ticket-demand-high.html">2 p.m. (this show 
just added!)</ins>。datetime 属性 提供 编辑 
的 时 间 。( 关于 datetime 可 接受 的 格式 ， 参 
见 4.7 市。) 浏览 器 不 会 将 这 两 个 属性 的 值 显 
示 出 来 ， 因 此 它们 的 使 用 并 不 广泛 。 不 过 ， 
应 该 尽量 包含 它们 ， 从 而 为 内 容 提 供 一 些 背 
景 信息 。 它 们 的 值 可 以 通过 JavaScript 或 分 析 
页 面 的 程序 提取 出 来 。 











如 果 需 要 向 访问 者 展示 内 容 交 化 情 
况 ， 就 可 以 使 用 del 和 ins。 例如， 经常 可 以 
看 见 一 些 Web 设计 与 开发 教程 使 用 它们 表示 
初次 发 布 以 后 新 更 新 的 信息 ， 这 样 可 以 保持 
原始 信息 的 完整 性 。 博 客 、 新 闻 网 站 等 也 可 
以 这 样 做 。 


用 ins 标记 的 文本 通常 会 显示 一 条 下 
划 线 (图 4.12.2 ) 。 由 于 链接 通常 也 以 下 划 线 
表示 (可 能 你 的 网 站 不 是 这 样 ， 但 其 他 很 多 
网 站 都 是 这 样 ) , 这 可 能 会 让 访问 者 感到 困惑 。 
可 以 使 用 样式 表 改 变 插 入 的 段落 (或 链接 ) 
的 外 观 ( 参见 第 10 章 )， 


用 del 标记 的 文本 通常 会 显示 一 条 删 
除 线 ( 图 4.12.2 ) 。 为 什么 不 直接 清除 这 些 文 
字 呢 ? 这 取决 于 你 认为 是 否 需要 将 删除 的 内 
容 显 示 出 来 。 加 上 删除 线 以 后 ， 用 户 就 很 容 
钨 看 出 修改 了 什么 。( 同 时， 屏幕 阅读 器 可 
以 读 出 被 删除 的 内 容 ， 不 过 目前 对 这 一 特性 
的 支持 还 不 充分 。 ) 


仅 在 有 语义 价值 的 时 候 使 用 del、ins 
和 s。 如 果 只 是 出 于 装饰 的 原因 要 给 文字 添加 
下 划 线 或 删除 线 ， 可 以 用 CSS 实现 这 些 效 果 
(参见 10.6 节 ) 。 


HTML5 指出 : “s 元 素 不 适用 于 指 
示 文 档 的 编辑 ， 要 标记 文档 中 一 块 已 移 除 的 
文本 ， 应 使 用 del 元 素 。” 有 时 ， 这 之 间 的 
差异 是 很 微妙 的 ， 只 能 由 你 决定 哪 种 选择 更 
符合 内 容 的 语义 。 
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4.13 ”标记 代码 


如 果 你 的 内 容 包 含 代码 示例 或 文件 名 ， 
就 可 以 使 用 code 元 系 ( 人 参见 图 4.13.1 和 
图 4.13.2 ) 。 





<body> 


<p?The <code>showpPhoto()</code> function 
displays the full-size photo of the 
thumbnail in our <code>&]lt;ul id= 
"thumbnail"&gt;</code> carousel list.</p> 


<p>This CSS shorthand example applies a 
margin to all sides of paragraphs: <code>p 
{ margin: 1.25em; }</code>. Take a look 
at <code>base.css</code> to see more 
examples.</p> 


</body> 
</htm]> 











图 4.13.1 code Oe i 
件 名 。 如 果 你 的 代码 需要 显示 < 或 >， 应 分 别 使 
用 全 和 这里 第 二 个 cote 下 全] 这 一 

点 。 如 果真 的 用 了 < 和 >， 浏 览 句 会 将 这 些 代码 当 
做 HTML 元 素 处 理 ， 而 不 是 当做 文本 处 理 
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元 素 包 住 code 元 素 以 维持 其 格式 ( 具 
例 参 见 4.14 节 ) 。 


体 的 示 


Marking up Code 
Marking up Code 
The showPhotol ) function displays the full-size photo 


of the thumbnail in oyur <ul id="thumbnails's 
Carousel list. 


This CSS shorthand example applies a margin to al 
sides of paragraphs: p { margin: 1.25em; }. Jakea 
look at base .css to See more examples. 








图 4.13.2 “code 元素 的 文本 看 起 来 像 代码 ， 因 为 
其 默认 字体 为 等 完 字 体 





标记 代码 或 文件 名 的 步骤 
(1) 输入 “codey>。 

(2) 输入 代码 或 文件 名 。 
(3) 输入 </code>。 


可 以 通过 CSS 改变 code 默认 的 等 宽 
字体 样式 (图 4.13.2 ) ,参见 第 10 章 。 


示例 展示 了 句子 中 的 代码 。 要 显示 单独 关于 字符 实体 ( 图 4.13.1 ), 参 见 14 节 。 
的 一 块 代 码 ( 位 于 句子 以 外 ) ， 可 以 用 pre 
其 他 计算 机 相关 元 素 : kbd、samp 和 var 

kbd、samp 和 var 元 素 极 少 使 用 ,不 过 你 可 能 会 在 内 容 中 用 到 它们 ,下 面 对 它们 作 简 要 说 明 。 


@ kbd 元 素 
使 用 kbd 标记 用 户 输入 指示 。 


《<p>To log into the demo:</p> 
<01> 


<li>Type <kbd>tryDemo</kbd> in the User Name field</1i> 
<li><kbd>TAB</kbd> to the Password field and type <kbd>demoPass</kbd></1i> 
“Li>Hit <kbd>RETURN</kbd> or <kbd>ENTER</kbd></1i> 


</01> 


与 code 一 样 ，kbd 默认 以 等 宽 字 体 显 示 。 
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@ samp 元 素 


samp 元 素 用 于 指示 程序 或 系统 的 示例 输出 。 


<p>Once the payment went through, the site returned a message reading,<samp>Thanks 


for your orderl</samp></p> 


samp 也 默认 以 等 宽 字 体 显示 。 


@ var 元 素 
Var OA RT 


<p>Einstein is best known for <var>E</var>=¢var>m</var><var>c<¢/var><sup>2</sup>.</p> 
Var 也 可 以 作为 内 容 中 占 位 符 的 值 ,例如 ,在 填词 游戏 的 答题 纸 上 可 以 放 入 <var>adjective 


/Var>, <var>verb</var>, 
Var 默认 以 斜体 显示 。 


需要 注意 的 是 ， 可 以 在 HTML5 页 面 中 使 用 math 等 MathML 元 素 表示 高 级 的 数学 相关 的 标 
记 。 更 多 信息 参见 http://dev.w3.org/html5/spec-author-view/mathml.html。 


4.14 ”使 用 预 格式 化 的 文本 


通常 ,浏览 帮 会 将 所 有 额外 的 回 车 和 空 
格 压 缩 ， 并 根据 窗口 的 大 小 上 自动 换行 。 预 格 
式 化 的 文本 可 以 保持 文本 固有 的 换行 和 空格 。 
它 是 计算 机 代码 示例 的 理想 元 素 ， 如 图 4.14.1 
所 示 ， 不 过 你 也 可 以 将 它 用 于 文本 ( 比如， 
ASCII 艺术 ”) 。 


使 用 预 格式 化 文本 的 步 又 

(1) 输入 <pre>。 

(2) 输入 或 复制 希望 以 原样 显示 的 文本 ， 
包括 所 需要 的 空格 、 回 车 和 换行 。 除 非 是 代码 ， 
不 要 用 任何 HIML( 如 p 元 系 ) 标 记 这 些 文本 。 

(3) 输入 <“/piey>。 














Q) ASCII 艺术 指 的 是 用 计算 机 字符 ( 主要 是 ASCII 字 








<body> 


<p>Add this to your style sheet if you want 
to display a dotted border underneath the 
<code>abbr</code> element whenever it has 
a <code>title</code> attribute.</p> 


<pre> 
<code> 
abbr[title] { 
border-bottom: 1px dotted #000; 


y 


</code> 
</pre> 


</body> 
</htm]> 


4.14.1 对 于 包含 重要 的 空格 和 换行 的 文本 (如 
这 里 显示 的 CSS 代码 ) ，pre 元 素 是 非常 适合 的 。 
同时 要 注意 code 元 系 的 使 用 ， 该 元 系 可 以 标记 pre 
外 面 的 代码 块 或 与 代码 有 关 的 文本 ( 更 多 细节 参见 
4.13 节 ) 














符 ) 表示 图 片 的 一 种 艺术 形式 ， 通 常 要 求 使 用 等 宽 字 体 显 示 。 





译 者 注 
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Preformatted text 
Preformatted text 





Add this to your style sheet if you want to display a dotted border 
underneath the abbr element whenever it has a title attribute. 


abbr[title] 1 
border-bottom: lpx dotted #000; 
} 


图 4.14.2 注意 pre 内 容 里 的 缩 进 和 换行 都 被 保 
留 了 
提 示 客 


预 格式 化 的 文本 通常 以 等 宽 字 体 
( 如 Courier、Courier New 等 ) 显示 ， 参 
图 4.14.2。 可 以 使 用 CSS 改变 字体 样式 ( 参 
见 第 10 章 ) 。 


如 果 要 显示 包含 HTML 元 素 的 内 容 
( 如 教程 中 的 代码 示例 ) ， 应 将 包围 元 素 名 
称 的 < 和、 分 别 改 为 其 对 应 的 字符 实体 &lt; 
和 &gt; (有关 示例 参见 4.13 节 ) 。 否 则 ， 浏 


一 定 要 对 页 面 进 行 验证 ， 检 查 是 否 在 
pre 中 谱 套 了 HTML 元 素 (参见 20.1 节 )。 


不 要 将 pre 作为 逃避 以 合适 的 语义 
标记 内 容 和 用 CSS 控制 样式 的 快捷 方式 。 例 
如 ， 如 果 你 想 发 布 一 篇 在 字 处 理 软 件 中 写 好 
的 文章 ， 不 要 为 了 保留 原来 的 格式 ， 简 单 地 
将 它 复制 、 丫 贴 到 pre 里 。 相 反 ， 应 该 使 用 
( 以 及 其 他 相关 的 文本 元 素 ) 标记 内 容 ， 编 
写 CSS 控制 页 面 的 布局 。 


同 段落 一 样 ，pre 默认 从 新 一 行 开始 
显示 (图 4.14.2 ) 。 
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pre 在 表现 方面 的 注意 事项 

注意 几 齐 览 器 通 第 会 对 了 ee 理 面 的 内 
容 关 闭 自动 换行 ,因此 ,如 果 这 些 内 容 很 宽 ， 
就 会 影响 页 面 的 布局 , 或 产生 横向 滚动 条 。 
下 面 的 CSS 规则 可 以 对 pre 的 内 容 打 开 自 
动 换行 ， 但 在 Internet Explorer 7 及 以 下 版 
本 中 并 不 适用 。(〈 随 着 浏览 器 市 场 占 有 率 
的 改变 ， 在 大 多 数 情 况 下 ， 这 些 情况 都 不 
有 

pre { 


white-space: pre-wrap; 


| 


与 之 相关 的 一 点 提示 是 ， 在 大 多 数 情 况 
下 不 推荐 对 div 等 元 素 使 用 white-space: pre 
以 代 奉 pre， 因 为 空格 可 能 对 这 些 内 容 〈 尤 其 
是 代码 ) 的 语义 非常 重要 ， 而 只 有 pre 才能 
始终 保留 这 些 空 格 。(〈 同时， 如 果 用 户 在 其 
浏览 硕 中 关闭 了 CSS， 格式 就 于 失 了 。 ) 

我 们 将 从 第 7 草 开 始 讲解 CSS， 在 第 10 
草 中 讨论 文本 的 格式 化 。 


4.15 ”突出 显示 文本 


我 们 都 在 某 些 时 候 用 过 葡 光 笔 一 一 也 许 
是 在 复习 考试 ， 抑 或 是 在 审查 合同 。 无 论 是 
哪 种 情况 ， 莹 光 笔 标记 的 都 是 一 些 与 任务 有 
关 的 关键 字 词 。 

HTML5 使 用 新 的 mark 元 素 实 现 同 样 的 
目的 。 试 着 将 mark 想象 成 欧 光 笔 的 语义 化 对 
照 物 。 换 句 话 说， 重要 的 是 对 特定 的 词语 进 
行 标 注 ， 与 它们 如 何 显示 无 关 。 可 以 用 CSS 
对 mark 元 素 里 的 文字 应 用 样式 〈 不 应 用 样式 
也 可 以 ), 但 应 仅 在 合适 的 情况 下 使 用 该 元 素 。 

无 论 何 时 使 用 mark， 该 元 素 总 是 用 于 提 
起 读者 对 特定 文本 片段 的 注意 。 下 面 是 一 些 
应 用 的 例子 。 
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口 对 搜索 结果 页 面 或 文 草 中 的 搜索 词 进 

行 突 出 显示 。 当 我 们 谈 到 mark 时 ， 

这 是 最 稼 见 的 应 用 场景 。 假 设 使 用 网 
站 的 搜索 功能 查找 “solar panels”。 
搜索 结果 或 每 个 结果 文 草 可 以 使 用 
<mark>solar panels</mark>， 从 而 在 
整 篇 文字 中 突出 显示 该 词 。 

口 对 于 某 段 引述 ， 如 果 作 者 在 原来 的 格 
式 中 没有 对 其 进行 突出 显示 ， 可 以 用 
mark 引起 对 它 的 注音 ( 参见 图 4.15.1 
和 图 4.15.2) 。 这 与 现实 世界 中 的 做 
法 是 类 似 的 。 

口 引起 对 代码 片段 的 注意 ( 参见 图 4.15.3 
和 图 4.15.4 ) 。 

















<body> 


<p>S0, I went back and read the instructions 
myself to see what I'd done wrong. They 
said:</p> 


<blockquote> 
<p>Remove the tray from the box. Pierce 
the overwrap several times with a 
fork and cook on High for <mark>15 
minutes</mark>, rotating it half way 
through.</p> 
</blockquote> 


<p>I thought he'd told me <em>fifty</em>. No 
wonder it exploded in my microwave.</p> 


</body> 
</html> 





图 4.15.1 mark 最 稼 见 的 使 用 场合 是 在 搜索 结 

页 面 , 不 过 ， 这 里 给 出 了 男 一 种 合理 的 用 法 。 包 装 

上 上 的 说 盟 中 没有 突出 显示 “15 minutes 一 癌 ， 但 
这 个 HTML 的 作者 却 使 用 mark 突出 显示 了 这 个 词 


突出 显示 文本 的 步骤 

(1) 输入 <mark>。 

(2) 输入 希望 引起 注意 的 字 词 。 
(3) 输入 </mark>。 
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Highlighting Text 


So, I went back and read the instructions myself to 
see what I'd done wrong. They said: 


Remove the tray from the box. Pierce the 
Qverwrap several times with a fork and 
cook on High for TSInates, rotating it 
half way through. 


I thought he'd told me fifry, No wonder it exploded in 
my microwave. 





图 4.15.2 ”对 mark 原生 支持 的 浏览 0 
的 文字 默认 加 上 黄色 背景 . 旧 的 浏 览 圳 不 会 这 样 做 ， 
但 通过 一 条 a oo 
种 效果 (参见 提示 ) 


<body> 


<p>It's usually bad practice to use a class 
name that explicitly describes how an 
element should look, such as the 
highlighted portion of CSS below:</p> 


<pre> 
<code> 
<mark>.greenText</mark> { 
color: green; 
jl 
</code> 
</pre> 


</body> 
</html> 


4.15.3 这 个 例子 使 用 mark 引起 对 代码 片段 的 
注意 


个 眉 自 Highlighting Text 





Highlighting Text 


t's bad practice to use a class name that explicitly 
describes how an element should look, such as the 


highlighted portion of CSS below: 


{ 


color: green: 





图 4.15.4 浏览 器 突出 显示 了 由 mark 标记 的 代码 
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mark 元 素 与 em (表示 强调 ) 或 


提 示 | 
strong (表示 重要 ) 不 同 ， 这 两 个 元 素 在 本 章 
前 面 讲 过 了 。 


由 于 mark 是 HTML5 的 新 元 素 ， 
此 旧 的 浏览 器 不 会 默认 加 上 黄色 背景 。 可 以 
在 样式 表 中 加 上 mark { background-color: 


yellow; } 让 这 些 浏览 器 实现 同样 的 效果 。 


不 要 仅仅 因为 要 给 文字 加 上 背景 颜色 
或 其 他 视觉 上 的 考虑 而 使 用 mark。 如 果 只 是 
要 给 一 块 文字 添加 样式 ， 又 没有 合适 的 语义 
化 元 素 ， 可 以 使 用 span 元 素 (本 章 后 面 将 讲 
到 ) ， 并 用 CSS 为 其 添加 样式 ( span 元素 可 
能 需要 添加 一 个 class ) 。 


4.16 创建 换行 


浏览 硕 会 根据 包含 内 容 的 块 或 窗口 的 宽 
度 让 文本 目 动 换行 。 大 多 数 情 况 下 ， 让 内 容 
像 这 样 充满 整 行 是 很 合适 的 ， 但 有 时 你 希望 
手动 地 强制 文字 进行 换行 。 可 以 使 用 br 元 素 
实现 这 一 要 求 。 

要 确保 使 用 br 是 最 后 的 选择 ， 因 为 该 元 
素 将 表现 样式 带 入 了 HTML， 而 不 是 让 所 有 
的 呈现 样式 都 交 由 CSS 控制 。 例 如 ， 不 要 使 
用 br 模拟 段落 之 间 的 距离 。 相 反 ， 应 该 用 p 
标记 两 个 段落 并 通过 CSS 的 margin 属性 规定 
两 段 之 间 的 距离 。 

那么 ， 什 么 时 候 该 用 br 呢 ? 实际 上 ， 对 
于 诗歌 、 街 道 地 址 ( 图 4.16.1 和 图 4.16.2 ) 
等 应 该 紧 挨 着 出 现 的 短 行 ， 都 适合 用 br 
UR 
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<body> 


<p>53 North Railway Street<br /> 
Okotoks, Alberta<br /> 
Canada T10 4H5</p> 


<p>53 North Railway Street 《br />Okotoks, 
个 AJberta <br />Canada T10 4H5</p> 


</body> 
</htm]> 





图 4.16.1 同样 的 地 址 出 现 了 两 次 ， 不 过 出 于 演示 
的 目的 ， 对 它们 的 编码 有 所 不 同 。 记 住 ， 浏 览 希 总 
是 会 忽略 代码 里 的 回 车 ， 因 此 两 个 段落 的 显示 效果 
是 一 样 的 (图 4.16.2 ) 





Creating a Line Break 
Creating a Lime Break: 


53 North Railway Street 
Okotoks, Alberta 


Canada 工 1 4H3 


53 North Railway Street 
Okotoks, Alberta 
Canada TI1Q 4H5 





图 4.16.2 每 个 bz 元 素 强制 让 接 下 来 的 内 容 在 新 
的 一 行 显示 。 如 果 没 有 br 元 素 ， 整 个 地 址 都 会 显 
示 在 同一 行 ( 除非 浏 览 圳 窗口 太 罕 导 致 内 容 换行 ) 


插入 换行 的 方法 

在 需要 换行 的 地 方 输入 <br /> (或 
cbr> ) 。 没 有 单独 的 br 结束 标签 ， 因 为 它 是 
所 谓 的 空 元 素 ， 没 有 任何 内 容 。 





在 HIMLS 中 ， 输 入 <br /> 或 《bry> 
都 是 有 效 的 。 
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可 以 使 用 CSS 控制 段落 中 的 行 间距 
(参见 10.7 节 ) 以 及 段落 之 间 的 距离 (参见 
11.8 节 ) 。 


hCard 微 格 式 〈http:Wmicroformats.org/ 
wikihcard ) 是 用 于 表示 人 、 公 司 、 组 织 和 地 
点 的 人 类 和 机 器 都 可 读 的 语义 形式 。 可 以 使 用 
微 格 式 替 代 图 4.16.1 中 表示 街道 地 址 的 方式 。 


4.17 创建 span 


同 div 一 样 ,span 元 素 是 没有 任何 语义 的 。 
不 同 的 是 , span 只 适合 包围 学 词 或 短语 内 容 ， 
而 div 适合 包含 块 级 内 容 (参见 3.12 市 ) 。 

如 果 你 想 将 下 面 列 出 的 项 目 应 用 到 某 一 
小 块 内 容 ， 而 HTML 又 没有 提供 合适 的 语义 
化 元 系 ， 就 可 以 使 用 span。 

口 属性 ， 如 class、dir、id、lang、title 

等 (图 4.17.1 和 图 4.17.2)。 








<body> 


<h1 lang= es >La Casa Mila</h1> 


<p>Gaudi's work was essentially useful. 
<span lang="es">La Casa Mila</span> is 
an apartment building and <em>real people 
</em> live there.</p> 


</body> 
</html> 


4.17.1 在 这 个 例子 中 ， 我 想 对 一 小 块 文字 指定 
不 同 的 语言 ， 但 从 句子 的 上 下 文 看 ， 没 有 一 个 语义 
上 适合 “La Casa Mila” 的 HTML 元 素 。 段 落 之 前 
包含 “La Casa Mila” 的 hi 在 语义 上 是 合适 的 ， 
为 这 些 文字 就 是 后 面 内 容 的 标题 ,因此 对 标题 来 说 ， 
直接 在 hi 中 添加 lang 属性 就 可 以 了 ,不必 为 了 指 
定语 言 而 将 标题 包 在 一 个 span 中 ( lang 属性 用 于 
对 元 系 的 文本 指定 语言 ) 














D CSS 样式 。 

口 JavaScript 行为 。 

由 于 span 没有 任何 语义 ， 因 此 应 将 它 作 
为 最 后 的 选择 ， 仅 在 没有 其 他 合适 的 元 陛 时 
才 使 用 它 。 


Creating Spans 


| 
1 


La Casa Mila 


Gaudfs work was essentially usetul. La Casa Mila 
is an apartment building and rea! people live there. 








4.17.2 span 元 素 没 有 任何 默认 样式 

添加 span 的 步骤 

(1) 输 入 <span。 

(2) 如 有 果 需 要 ， 输 入 id="name"， 其 中 
name 用 于 唯一 地 标识 span 包含 的 内 容 。 

(3) 如 果 需 要， 输入 class="name"， 其 中 
name 是 span 所 属 类 的 名 称 。 

(4) 如 果 需 要 ,输入 其 他 的 属性 (如 
dir、lang、title 等 ) 及 其 值 。 

(5) 输入 > 结束 开始 标签 。 

(6) 创建 希望 包含 在 span 里 的 内 容 。 

(7) 输入 </span>。 


6 span 没 有 任何 默认 格式 (参见 
图 4.17.2 ) ， 但 就 像 其 他 HTML 元 素 一 样 ， 
可 以 用 CSS 添加 你 自己 的 样式 。 


可 以 对 一 个 span 元 素 同 时 添加 class 
和 id 属性 , 但 通常 只 应 用 这 两 个 中 的 一 个 (如 
果真 要 添加 的 话 ) 。 主 要 区 别 在 于 ，class 用 
于 一 组 元 素 ， 而 id 用 于 标识 页 面 中 单独 的 、 
唯一 的 元 素 。 
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在 HIML 没有 提供 合适 的 语义 化 元 
素 时 ， 微 格式 经 常 使 用 span 为 内 容 添 加 语义 
化 类 名 ， 以 填补 语义 上 的 空白 。 要 了 解 更 多 


言 息 ， 参 见 http:/microformats.org 。 


4.18 其 他 元 素 


本 节 讲 的 是 HTML 文本 中 可 能 用 到 的 其 
他 元 素 ， 但 它们 通常 只 在 极 少 数 情况 下 才 会 
用 到 ， 或 者 浏览 需 对 它们 的 文 持 还 不 完善 (或 
兼 而 有 之 ) 。 


1.u 元 素 

同 b、i、s 和 small 一样 ，HTMLS 重新 
定义 了 u 元 素 ,， 使 之 不 再 是 无 语义 的 、 用 于 
表现 的 元 素 。 以 前 ，u 元素 用 来 为 文本 添加 下 
划 线 。 现 在 , u 元 素 用 于 非 文本 注解 〈 听 起 来 
确实 有 些 迷 惑 ) 。HTMLS5 对 它 的 定义 为 : 


U 元素 为 一 块 文字 添加 明显 的 非 
文本 注解 ， 比 如 在 中 文中 将 文本 标 
为 专 有 名 词 ( 即 中 文 的 专 名 号 2) ， 
或 者 标明 文本 拼写 有 误 。 

下 面 是 使 用 u 标注 拼 错 的 词 的 例子 : 


<p>Nhen they <u class="spelling"> 
recieved</u> the package, they put 
it with <u class="spelling">there 
</u> other ones with the intention 
of opening them all later.</p> 


class 完全 是 可 选 的 ， 它 的 值 (可 以 是 你 
想 填 的 任何 内 容 ) 也 不 会 在 内 容 中 明显 指出 
这 是 个 拼写 错误 。 不 过 ， 可 以 用 它 对 拼 错 的 
词 添 加 不 同 于 普通 文本 的 样式 (vu 默认 仍 以 下 
划 线 显示 ) 。 通 过 title 属性 可 以 为 该 元 素 包 
含 的 内 容 添 加 注释 ， 如 “[sicJ”【〔 在 一 些 语言 
中 用 于 指示 拼写 错误 的 惯用 符号 
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仅 在 cite、em、mark 等 其 他 元 系 语 义 上 
不 合适 的 情况 下 使 用 u 元 素 。 同 时 ， 最 好 改 
变 Uu 文 本 的 样式 ， 以 免 与 同样 默认 添加 下 划 
线 的 链接 文本 弄 混 (图 4.18.1 ) 。 











DD Unarticulated Annotations 


Unarticulated Anmotations 


When they recieved the package, they put it 
with there other ones with the intention of 
opening them all later. 





图 4.18.1 同 链 接 一 样 ， 浏 览 器 默认 为 u 元 素 添 加 
下 划 线 。 除 非 用 CSS 改变 它们 的 样式 ， 否 则 容易 
引起 混淆 


2. wbr 元 素 

HTMIL5 为 br 引入 了 一 个 相近 的 元 素 ， 
称 为 wbr。 它 代表 “一 个 可 换行 处 ”。 可 以 在 
一 个 较 长 的 无 间断 短语 (如 URL ) 中 使 用 该 
元 素 , 表示 此 处 可 以 在 必要 的 时 候 进 行 换行 ， 
从 而 让 文本 在 有 限 的 空间 内 更 具 可 读 性 。 因 
此 ， 与 br 不同 ，wbr 不 会 强制 换行 ， 而 是 让 
浏览 器 知道 哪里 可 以 根据 需要 进行 换行 。 

下 面 是 一 些 例子 : 


<p>They liked to say, "FriendlyFleas 
andFireFlies<wbr /> FriendlyFleasa 
ndFireFlies<wbr />FriendlyFleasand 
FireFlies<wbr /> as fast as they 
could over and over.</p> 














<p>His favorite site is this<wbr /> 
is<wbr />a<wbr />really<wbr /> 
really<wbr />longurl.com.</p> 


输入 wbr 时 ， 既 可 以 用 <wbr />， 也 可 
以 用 <wbr>。 或 许 你 已 经 猜 到 了 ， 用 到 wbr 
的 场合 并 不 多 。 而 且 ， 截 至 本 书写 作 之 际 ， 
浏览 圳 对 它 的 支持 并 不 一 致 。 尽 管 在 当前 版 











由 专 名 号 用 于 表示 人 名 、 地 和 名、 朝代 名 等 专 名 。 一 一 译 者 注 
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本 的 Chrome 和 Firefox 中 wbr 是 有 效 的 ， 但 
Internet Explorer 和 Opera 会 忽略 它 。 





3. Yuby、Trp 和 Tt 元素 

旁 注 标 记 ( ruby annotation ) 是 东亚 语言 ( 如 
中 文 和 日 文 ) 中 一 种 惯用 符号 ， 通 和 常用 于 表 
示 和 生僻 字 的 发 首 。 这 些小 的 注解 字符 出 现在 
它们 标注 的 字符 的 上 方 或 右 方 。 它 们 和 价 称 
为 旁 注 (ruby 或 rubi) 。 日 语 中 的 劳 注 字 符 
称 为 振 假 名 〈furigana ) 。 

ruby 元 素 以 及 它们 的 子 元 素 Trt 和 rp 是 
HTMLS 中 为 内 容 添加 劳 注 标记 的 机 制 。zt 指 
明 对 基准 字符 进行 注解 的 劳 注 字 符 。 可 选 的 
rp 元 素 用 于 在 不 支持 ruby 的 浏览 吉 中 的 旁 注 
文本 周围 显示 括号 。 

下 面 的 例子 用 英文 占 位 符 展示 了 这 种 结 
构 ， 帮助 你 理解 代码 中 以 及 支持 和 不 文 持 它 
们 的 浏览 部 中 对 各 类 信息 的 安排 方式 〈 文 持 
的 浏览 器 效果 如 图 4.18.2， 不 支持 的 效果 如 
图 4.18.3 ) 。 浏 览 器 将 劳 注 文本 进行 了 突出 显示 : 


<ruby> 
































base <rp>(</rp><rt>ruby chars 
</rt><rp>)</rp> 


base <rp>(</rp><rt>ruby chars 
</rt><rp>)</rp> 


</ruby> 

现在 ， 展 示 一 个 真实 例子 。 例 子 中 有 两 
个 表示 “Beijing” 的 中 文 基准 字符 ， 以 及 伴 
随 它 们 的 劳 注 字 符 (图 4.18.4) : 


<ruby> 








北 《ITp>(C/Tp><Tt> 夕 仆 </Tt><Tp>)</Tp> 


一 > 一 


京 <rp>(</rp><rt>d1 人 </Tt><Tp>)</Tp> 
</ruby> 


可 以 看 到 在 不 支持 ruby 的 浏览 器 中 括号 
的 重要 性 ( 参见 图 4.18.5 ) 。 没 有 它们 ， 基 准 
字符 和 和 劳 注 文 本 承 会 显示 在 一 起 ， 让 内 容 变 
得 混乱 。 





roby chars raby chars 


base base 


图 4.18.2 ”支持 旁 注 标 记 的 浏览 避 会 将 劳 注 文本 
显示 在 基准 字符 的 上 方 (也 可 能 在 旁边 ) ,不 显示 
括号 





base (ruby chars) base (ruby chars) 





图 4.18.3 不 支持 旁 注 标记 的 浏览 器 会 将 旁 注 文本 
显示 在 括号 里 ， 就 像 普通 的 文本 一 样 





北 ( 了 未 (| 二) 


图 4.18.5 ”在 不 支持 旁 注 的 浏览 器 中 ， 如 果 没 有 括 
号 ， 内 容 就 会 变 得 难以 理解 











在 本 书写 作 之 际 ，Firefox 和 Opera 还 
缺少 基本 的 Tuby 支持 (这 也 是 使 用 rp 的 原 
因 ) 。 不过，Firefox 插件 HTML Ruby ( https:// 
addons.mozilla.org/en-US/firefox/addon/html- 
ruby/ ) 为 Firefox 提供 了 对 穷 注 的 支持 。 


关于 旁 注 字 符 的 更 多 信息 ， 参 见 
http://en.wikipedia.ors/wiki/Ruby_character, 
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4. bdi 和 bdo 元 素 

如 果 你 的 HTML 页 面 中 混合 了 从 左 至 右 
书写 的 字符 (如 大 多 数 语 言 所 用 的 拉丁 字符 ) 
和 从 右 至 左 书写 的 字符 〈 如 阿拉 伯 语 或 希 介 
来 语 字符 ) ， 就 可 能 要 用 到 bdi 和 bdo 元 素 。 

不 过 ， 首 先 要 讲 一 点 背景 知识 。 除 非 
在 html 元 素 中 添加 dir 属性 并 将 属性 值 设 为 
rtl, 否则 内 容 的 基准 方 回 都 默认 为 从 左 至 右 。 
例如 ，<html dir="rtl"” lang="he"> 指明 内 
容 的 方 同 为 从 右 至 左 , 旦 基准 语言 为 希 伯 来 语 。 

就 像 我 在 全 书 多 个 示例 中 对 lang 的 处 理 
方式 一 样 ， 对 于 页 面 内 的 元 系 ， 如 果 其 内 容 
与 页 面 基准 设置 不 一 致 ， 也 可 以 对 其 设置 dir 
属性 。 因 此 ， 如 采 基 准 语 言 设 为 喘 语 ( <html 
lang="en"> ) ， 义 要 包含 一 段 希 伯 来 语 ， 就 可 
以 标记 为 <p dir="rtl" lang="he">...</p>。 

单独 进行 了 设置 的 内 容 一 般 将 按照 希望 
的 方向 显示 。 这 是 由 Unicode 的 双向 〈bidi ) 
算法 控制 的 。 

如 果 上 述 算法 不 按 设想 的 方式 显示 文本 ， 
可 以 使 用 bdo( bidirectional override, 双 回 重 载 ) 
元 素 对 内 容 进 行 重 载 。 通 铝 ， 这 代表 HTML 
源 代码 中 的 内 容 是 视觉 顺 友 而 非 逻 辑 顺 友 的 
情况 。 

视觉 顺序 〈visual order ) 束 是 内 容 看 上 去 
的 顺序 一 一 HTML 源 代 码 内 容 与 你 希望 显示 
的 顺序 相同 。 有 逻辑 顺序 (logical order ) 则 与 
之 相反 ， 可 用 于 希 伯 来 语 这 样 从 右 至 左 书写 
的 语言 。 先 输入 从 右 至 左 的 第 一 个 字符 ， 然 
后 是 第 二 个 ( 也 就 是 第 一 个 字符 左边 的 字符 )， 
以 此 类 推 。 

根据 最 佳 实践 ，Unicode 和 希望 双 回 文本 
都 以 逻辑 顺序 呈现 。 因 此 ， 如 果 文 本 是 以 视 
党 顺序 呈现 的 ， 算 法 仍 会 让 字符 反 加 ， 显 示 
出 与 预期 相反 的 顺序 。 如 有 果 你 无 法 将 HTML 
源 代码 中 的 文本 转换 为 逻辑 顺序 ( 例如 ， 这 
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些 文本 可 能 来 日 数据 库 或 源 ) ， 束 只 能 依靠 
bdo 了 『。 

要 使 用 bdo， 必 须 包 含 dir 属性 并 将 属性 
值 设 为 ltr ( 由 左 至 右 ) 或 rtl (由 右 至 左 ) ， 
指定 你 布 望 呈现 的 方向 。 继 续 先 前 在 英文 页 
面 中 包含 希 们 来 语 段落 的 例子 ， 应 输入 “p 
lang="he"><bdo dir="zrt1">...</bdo></p>。 
bdo 适用 于 段落 里 的 短语 或 句子 。 不 能 用 它 包 
围 多 个 段落 。 

bdi 元 素 是 HTML5S 中 新 加 的 元 素 ， 用 于 
内 容 的 方向 未 知 的 情况 。 不 必 包 含 dir 属性 ， 
因为 默认 已 设 为 目 动 判断 。 下 面 的 例子 来 目 
HTMLS 规范 (但 有 少许 修改 ) : 

这 个 元 素 特 别 适 用 于 包围 用 户 

生成 的 方向 未 知 的 内 容 。 

在 这 个 例子 中 ， 用 户 名 与 用 户 提交 的 帖 
子 的 数量 显示 在 一 起 。 如 果 不 使 用 bdi 元 素 ， 
阿拉 但 用 户 的 用 户 名 将 让 文本 变 得 难以 理解 
( 双 同 算法 会 把 冒号 和 数字 “3” 置 于 “User” 
一 词 旁边 ， 而 不 是 在 “posts” 一 词 旁 边 ) 。 


<Ul> 
































<li>User <bdi>jcranmer</bdi>: 
12 posts.</1i> 


<li>User <bdi>hober</bdi>: 
5 posts.</1i> 


<li>User <bdiy>lslc</bdiy>: 
3 posts.</1i> 


</ul> 


要 了 解 关 于 由 右 至 左 语言 的 更 多 信 
息 ， 推 荐 阅读 W3C 的 文章 “Creating HTML 
Pages in Arabic, Hebrew, and Other Right-to-Left 
Scripts” (www.w3.org/International/tutorials/ 


bidi-xhtml/ ) 。 


5. meter 元 素 
meter 元 素 也 是 HTMLS5 的 新 元 素 。 乍 看 
起 来 , 它 很 像 progress 元 素 ( 接 下 来 会 讲 到 ， 
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根据 规范 ， 它 表示 “任务 的 完成 进度 ” ) 。 

可 以 用 meter 元 系 表 示 分 数 的 值 或 已 知 
范围 的 测量 结果 。 人 简单 地 说 ， 它 代表 的 是 投 
票 结 果 (如 “30% Smith，37% Garcia，33% 
Hawkins”) 、 已 售票 数 (如 “ 共 850 张 , 已 
售 811 张 ”)、 考 试 分 数 ( 如 “百分制 的 90 分 ”)、 
磁盘 使 用 量 (如 “256 GB 中 的 74GB”) 等 
测量 数据 。 

HTMLS 建议 (并非 强 制 ) 浏览 各 在 呈现 
meter 时 ， 在 劳 边 显示 一 个 类 似 温度 计 的 图 
形 一 一 一 个 表示 测量 值 的 横 条 , 测量 值 的 颜色 
与 最 大 值 的 颜色 有 所 区 别 (相等 除外 ) 。 作 
为 当前 少数 几 个 支持 meter 的 浏览 兹 ，Firefox 
正 是 这 样 显示 的 (参见 图 4.18.6 ) 。 对 于 不 支 
持 meter 的 浏览 硕 ， 可 以 通过 CSS 对 meter 
次 加 一 些 额 外 的 样式 ,或 用 JavaScript 进行 
改进 。 

















@AQ 
Providing a Gauge with meter 


Providing a Gauge with meter 


Project completion status: ON 
Car brake pad wear: 呈 | 


Miles walked during half-marathon: om 


Miles 


4.18.6 ”支持 meter 的 浏览 锅 (如 Firefox ) 会 目 
动 显示 测量 值 ， 并 根据 属性 值 进行 着 色 。<meter> 
和 </meter> 之 间 的 文字 不 会 显示 出 来 。 如 最 后 一 
个 例子 所 示 ， 如 果 包 含 title 文本 ， 就 会 在 鼠标 悬 
停 在 横 条 上 时 显示 出 来 


虽然 并 非 必需 ， 但 最 好 在 meter 里 包含 
一 些 反 映 当 前 测量 值 的 文本 ， 供 不 支持 meter 
的 浏览 兹 显示 ， 如 图 4.18.7 所 示 。 














i 


鱼 CX| 居 Providinga Gauge 


Prolect completion status- 80% completed 
Car brake pad wear: 21% worr 
Miles walked during half-marathon: 4.3 


4.18.7 IE9 不 支持 meter， 它 会 将 meter 元 素 
里 的 文本 内 容 显 示 出 来 ， 而 不 是 显示 一 个 彩色 的 横 
条 。 可 以 通过 CSS 改变 其 外 观 


下 面 是 一 些 meter 的 例子 ( 显示 结果 如 
图 4.18.6 和 图 4.18.7 所 示 ) : 


<p>Project completion status: <meter 
Value="0.80">80% completed</meter> 
> </p> 














<p>Car brake pad wear: <meter low= 
?"0.25" high="0.75" optimum="0O" 
?value="0.21">21% worn</meter></p> 


<p>Miles walked during half-marathon: 
《meter min="0" max="13.1" value="5.5" 
" title="Miles">4.5</meter></p> 


meter 不 提供 定义 好 的 单位 ， 但 可 以 使 用 
title 属性 指定 单位 ， 如 最 后 一 个 例子 所 示 。 
通常 ， 浏 览 带 会 以 提示 框 的 形式 显示 title 文 
本 (图 4.18.7)。 


meter 支持 好 几 个 属性 。value 是 其 中 
唯一 必需 包含 的 属性 。 如 果 不 指定 min ( 最 小 
值 ) 和 max (最 大 值 ) ， 则 默认 将 它们 分 别 设 
为 0 和 1.0。low、high 和 optimum 属性 通常 
共同 作用 ， 它 们 将 范围 划分 为 低 、 中 、 高 三 
个 区 间 。optimum 代表 范围 内 的 最 优 位 置 ， 如 
上 文 例子 中 的 “0 brake pad wear”。 如 果 low 
和 high 的 值 均 不 是 最 优 的 ， 可 以 将 optimum 
设 为 它们 之 间 的 值 。 
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截至 本 书写 作 之 际 ， 浏 览 器 对 meter 
的 支持 情况 还 在 变化 : Internet Explorer、 移 动 
Safari ( 用 于 iOS 设备 ) 和 Android 浏览 器 还 
不 支持 该 元 素 。 这 大 概 也 是 现实 中 很 少见 型 
它 的 原因 。 随 意 使 用 它 ， 只 是 需要 了 解 大 多 
数 浏览 器 默认 只 显示 meter 文本 而 不 显示 图 形 
(图 4.18.7 ) 。 关 于 最 新 的 浏览 器 支持 情况 ， 
参见 http://caniuse.com/#feat=progressmeter。 


< 


支持 meter 的 不 同 浏览 器 显示 测量 值 
图 形 的 样式 可 能 有 差异 。 


已 经 有 人 试 过 针对 支持 meter 的 浏览 
器 和 不 支持 的 浏览 器 统一 编写 meter 的 CSS。 
在 网 上 搜索 “style HTML5 meter with CSS”( 用 
CSS 为 HTMLS 的 meter 添加 样式 ) ， 就 可 以 
找到 一 些 解决 方案 ( 注意 其 中 的 一 些 用 到 了 
JavaScript ) 。 


meter 并 不 用 于 标记 没有 范围 的 普通 
测量 值 ， 如 高 度 、 宽 度 、 距 离 、 周 长 等 。 例 
如 ， 这 种 写法 是 不 正确 的 : <p>I walked <meter 
value="4.5">4.5</meter> miles yesterday.</p>, 


一 定 不 要 将 meter 和 progress 元 素 混 
在 一 起 使 用 。 


6. progress 元 素 

progress 元 素 也 是 HTML5 的 新 元 素 。 
前 面 说 过 ， 它 指示 某 项 任务 的 完成 进度 。 可 
以 用 它 表示 一 个 进度 条 ， 就 像 在 Web 应 用 中 
看 到 的 指示 保存 或 加 载 大 量 数据 操作 进度 的 
那 种 组 件 。 

就 像 meter 一 样 ， 文 持 progress 的 浏 
览 融 会 根据 属性 值 上 自动 显示 一 个 进度 条 (人参 
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见 图 4.18.8) 。 同 时 ， 和 meter 一 样 ， 为 了 
让 旧 的 浏览 器 也 能 表现 进度 ， 尽 管 并 非 必 
需 ， 但 最 好 在 progress 中 包含 反映 当前 进 
度 的 文本 ( 如 示例 中 的 “0% saved”， 人 参见 
图 4.18.9 ) 。 


Indicating Progress 


人 | 


Indicating Progress 
Please Wait while we save your data. 


Current progress:| 














4.18.8 支持 progress 的 浏览 器 ( 如 Firefox ) 
会 日 动 显示 进度 条 ， 并 根据 值 对 其 进行 着 色 。 
<progress> 和 </progress> 之 间 的 文本 不 会 显示 出 
来 。 在 这 个 例子 中 value 属性 设 成 了 0， 因 此 整个 
横 条 都 是 同样 的 颜色 


' 
Please wait while we save your data. 





| Current progress: 0% saved 
4.18.9 ”IE9 不 文 持 progress， 因 此 不 会 显示 有 
颜色 的 横 条 ， 而 是 显示 该 元 素 里 面 的 文本 。 可 以 通 
过 CSS 改变 其 外 观 


下 面 是 一 个 例子 : 


<p>Please wait while we save your 
» data.</p> 


























<p>Current progress: <progress 
— max="100" value="0">0% saved 
> </progress></p> 


对 progress 的 完整 说 明 已 经 超出 了 本 书 
的 范围 。 通 总 ， 你 只 能 通过 JavaScript 动态 地 
更 新 value 属性 值 和 元 素 里 面 的 文本 以 指示 
任务 进程 ( 例如， 指示 已 完成 37%) 。 使 用 
JavaScript 与 在 HTML 中 便 编 码 从 视觉 上 看 是 
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一 样 的 ， 即 
<progress max="100" value="37">37% 
savedx</progress> 


效果 如 图 4.18.10 所 示 。 当 人 然 ， 不 支持 的 
浏览 磊 会 显示 为 类 似 于 图 4.18.9 所 示 的 样子 。 


Indicating Progress 


Indicating Progress 
Please wait while we save your data. 


Current progress: BB | 





图 4.18.10 Firefox 中 显示 的 进度 条 ， 通 过 
JavaScript ( 或 直接 在 HTML 中 ) 将 value 属性 设 
为 37 (假定 max="100" ) 


progress 元 素 支 持 三 个 属性 : max、 
value 和 form。 它 们 都 是 可 选 的 ，max 属性 指 


定 任 务 的 总 工作 量 ， 其 值 必 须 大 于 0。value 
是 任务 已 完成 的 量 。 如 果 progress 没有 误 套 
在 form 元 素 里 面 ， 又 需要 将 它们 联系 起 来 ， 可 


以 添加 form 属性 并 将 其 值 设 为 该 form 的 id。 


图 灵 社 区 会 员 


改 progress 元 素 。 假 定 进 
个 id 5 如 : 


面 简单 地 看 看 如 何 用 JavaScript 修 
度 条 已 经 设 定 了 一 


<progress max="100" value="0" id= 
下 "progressBar >0% saved</progress> 


下 面 的 JavaScript 可 以 让 你 获取 该 元 素 : 


var bar = document.getElementById 
» ("progressBar'); 
然后 就 可 以 通过 bar.value 获取 或 设 定 value 
的 值 例如 ，bar.value=37; 可 以 将 值 设 为 37。 


在 本 书写 作 之 际 ， 大 多 数 桌 面 浏览 器 
的 最 新 版 本 都 支持 progress 元 素 。IE9 及 之 
前 的 版 本 、 移 动 Safari 和 Android 浏览 器 pa 
支持 该 元 素 。 关 于 最 新 的 浏览 器 支持 情 

参见 hn 


不 同 浏览 器 显示 进度 条 的 样式 可 能 
同 ， 本 寸 可 以 通过 CSS 为 它 添加 样式 。 
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本 章 内 容 

口 关于 Web 网 像 

口 获取 图 像 

口 选择 图 像 编辑 天 

口 保存 网 像 

D 在 页 面 中 搬 和 人 图 像 

口 提供 替代 文本 

口 指定 图 像 尺 寸 

口 在 浏览 器 中 改变 图 像 的 尺寸 
口 在 图 像 编辑 途中 改变 图 像 的 尺寸 
口 为 网 站 添加 图 标 





为 Web 创建 图 像 与 为 在 纸 上 输 出 而 创建 
图 像 有 所 不 同 。 尽 管 Web 图 像 和 可 打印 图 像 
的 基本 性 质 是 相同 的 ， 但 它们 在 格式 、 下 载 
速度 、 颜 色 、 大 小 〈 扩 寸 ) 、 透 明度 和 动画 
等 六 个 主要 方面 有 一 些 区 别 。 

本 章 将 曾 释 这 六 个 要 素 的 重要 方面 ， 以 
及 如 何 使 用 这 些 知 识 为 网 站 创建 有 效 的 图 像 。 
为 外 ， 还 将 学习 如 何在 网 页 中 插入 图 像 。 


5.1 关于 Web 图 像 


让 我 们 来 看 看 创建 Web 图 像 时 应 记 住 的 
六 个 有 要素。 如 果 你 不 愿意 花 时 间 了 解 具 体 的 
细节 ， 可 以 百 接 跳 至 节 末 的 “小 绪 ” 


1. 格式 与 下 载 速 度 
在 纸 上 打 印 图 像 的 人 不 必 担 心 读者 将 使 








用 什么 查看 岁 像 ， 谈 者 在 打开 琳 志 或 报纸 的 
页 面 时 也 不 必 等 竺 图 像 的 出 现 。 不 过 ， 在 万 
维 网 上 ， 情 况 就 不 一 样 了 。 

每 天 ， 人 们 通过 数 以 万 计 的 Mac、 基 于 
Windows 的 PC、Linux 机 器 、 手 机、 平板 电 
脑 等 各 种 各 样 的 设备 访问 万 维 网 。 网 页 中 的 
图 像 应 该 采用 这 些 设备 的 操作 系统 都 能 识别 
的 格式 。 当 前 ，Web 上 用 的 最 广泛 的 三 种 格 
式 是 GIFE、PNG 和 JPEG。 我 们 的 目标 是 选择 
质量 最 高 ， 同 时 文件 最 小 的 格式 。 

© JPEG 

JPEG 格式 适用 于 彩色 照片 ， 因 为 它 包 含 
大 量 的 颜色 并 进行 了 合理 的 压缩 ， 采 用 这 种 
格式 保存 的 文件 相对 较 小 (参见 图 5.1.1 ) 。 
图 像 的 文件 变 小 ( 且 不 论 是 何 种 格式 ) ， 下 





载 速度 束 会 变 快 ， 访问 者 就 不 必 等 生 较 长 时 
间 才 能 看 到 图 像 。 








5.1.1 全 彩 的 照片 通常 保存 为 JPEG 格式 。PNG-24 
格式 效果 也 很 好 ,但 通常 其 文件 大 小 比 JPEG 要 大 得 多 
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不 过 ，JPEG 是 一 种 有 损 的 格式 ， 因 此 在 
将 图 像 保 存 为 JPEG 时 会 丢失 一 部 分 原始 信 
息 ， 但 通常 有 必要 这 样 做 ， 因 为 我 们 可 以 将 
图 像 质 量 的 损失 控制 在 用 户 不 易 觉察 的 范围 
内 ， 却 能 显著 改善 图 像 的 加 载 速度 。 

注意 ， 对 JPEG 进行 解压 缩 无 法 还 原 图 像 
先前 丢失 的 细节 。 因 此 ， 如 果 未 来 还 有 可 能 
对 图 像 进行 编辑 ， 就 应 该 保存 一 份 使 用 无 压 
缩 格式 (如 PSD 或 TIFF ) 的 图 像 副 本 ， 只 有 
在 确保 不 再 对 图 像 进 行 修改 的 情况 下 才能 只 
保存 JPEG 格式 的 图 像 。 

© PNG 和 GIF 

PNG 和 GIF 是 无 损 的 格式 ， 因 此 采用 这 
两 种 格式 对 图 像 进行 压缩 时 不 会 造成 品质 的 
损失 。GIF 只 有 256 种 颜色 ， 但 PNG 却 文 持 
几 百 万 种 颜色 。 与 JPEG 不 同 ,，PNG 和 GIF 























均 文 持 透 明 ， 它 们 更 适用 于 保存 非 照 片 类 的 
图 像 。 通 常 ， 拥 有 大 片 纯色 的 图 像 ， 如 标识 、 
重复 的 图 案 、 插 图 以 及 图 像 文 字 等 都 适合 使 
用 这 两 种 格式 。 

可 以 使 用 PNG 保存 照片 ,但 由 于 无 损 图 
像 质量 ， 文 件 尺 寸 会 比 JPEG 大 得 多 。 因 此 ， 
只 有 在 压缩 造成 的 质量 损失 不 可 忽略 的 情况 
下 才 使 用 PNG 保存 照片 。 

PNG 有 儿 种 不 同 的 分 文 : PNG-8、PNG-24 
和 PNG-32。 一 般 来 说 ， 对 于 PNG 和 GIF， 
应 优先 选择 PNG， 因 为 它 对 透明 度 的 文 持 更 
好 ， 压 缩 算法 也 更 好 ,产生 的 文件 更 小 。 

通过 表 5.1.1 可 以 对 比 不 同 的 图 像 格式 ( 包 
括 PNG 的 不 同 分 支 ) 。5.4 节 包 含 了 对 图 像 
格式 和 压缩 情况 进行 设置 的 例子 。 




















表 5.1.1 图 像 格式 对 比 
格式 用 法 颜 色 索引 色 〈 基 本 ) 透明 alpha 透明 

JPEG 适用 于 大 多 数 照片 ， 以 及 其 他 颜色 较 多 且 可 接受 一 ”1600 万 以 上 一 一 
些 质量 损失 的 图 像 

PNG-8 ”适用 于 标识 、 重 复 的 图 案 以 及 其 他 颜色 较 少 的 图 像 ”256 支持 文 持 
或 具有 连续 颜色 的 图 像 

PNG-24 “与 PNG-8 相似 ， 不 过 文 持 颜色 更 多 的 图 像 。 适 用 于 ”1600 万 以 上 支持 一 
颜色 丰富 且 质 量 要 求 高 的 照片 

PNG-32 与 PNG-24 相似 ， 不 过 文 持 具有 alpha 透明 的 图 像 1600 万 以 上 一 文 持 

GIF 用 法 与 PNG-8 相似 ， 在 大 多 数 情 况 下 应 使 用 PNG-8 256 支持 

WebP 图 像 格 式 


谷歌 建立 了 另 一 种 图 像 格 式 ， 名 为 WebP。 这 种 格式 既 支 持 有 损 压 缩 也 支持 无 损 压缩 ， 
它 产 生 的 文件 大 小 也 远 小 于 JPEG 和 PNG。 跟 PNG 一 样 ， 它 还 支持 alpha 透明。 
WebP 还 在 发 展 之 中 ,截至 本 书写 作 之 际 ， 完 全 支持 这 种 格式 的 浏览 器 还 仅 限于 Chrome、 


Opera 12+ 和 一 些 Android 浏览 器 ， 至 于 其 他 浏 


I ov 日 


览 器 是 否 会 支持 这 种 格式 尚 不 可 知 。 不 过 ， 有 必 


要 关注 一 下 这 种 格式 的 进展 情况 。 在 很 长 一 段 时 间 内 ， 还 没有 办 法 做 到 让 支持 它 的 浏览 器 显示 
这 种 格式 的 图 像 ， 而 其 他 浏览 器 使 用 备用 格式 的 图 像 。 要 了 解 WebP 的 详细 信息 ， 参 见 https:// 


I vo 


developers.google.com/speed/webp/。 最 新 的 浏览 器 


支持 情况 参见 http://caniuse.com/#search=webp。 
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2. 颜色 

大 多 数 计算 机 显示 需 可 以 显示 数 以 百 万 
计 的 颜色 ， 但 也 有 例外 的 情况 。 有 的 图 像 格 
式 的 调 色 板 是 有 限 的 。GIF 和 PNG-8 图 像 只 
有 256 种 颜色 ， 对 标志 和 图 标 来 说 通常 这 已 
经 足够 了 (参见 图 5.1.2) 。 








NN 


Farm® Training 
Podcasts 








5.1.2 标识 和 其 他 颜色 较 少 的 图 像 通 常 保存 为 
PNG-8 格式 (也 可 以 保存 为 GIF 格式 ,不 过 相 较 
之 下 PNG 更 好 一 些 ) 。 另 见 彩 插 

JPEG、PNG-24 和 PNG-32 均 支持 超过 
1600 万 种 的 颜色 ， 因 此 照片 和 复杂 的 插图 应 
选择 这 些 格式 。 不 过 ， 需 要 指出 的 是 ， 对 于 
这 些 图 像 ， 大 多 数 情 况 下 应 使 用 JPEG。 


3. 大 小 (尺寸 ) 

你 曾经 收 到 过 一 些 在 屏幕 上 看 起 来 特别 
大 的 照片 吗 ? 这样 的 照片 通常 是 由 数码 相机 
拍摄 的 ， 而 发 送 照 片 给 你 的 人 又 没有 事先 编 
辑 文件 以 缩减 矿 寸 。 那 么 为 什么 这 些 照片 起 
初 这 么 大 呢 ? 如 果 将 它们 放 到 网 站 上 ， 应 该 
将 文件 大 小 控制 在 多 少 呢 ? 

数字 图 像 以 像 双 为 单位 进行 有 度量。 如今， 
超过 800 万 像素 的 数码 相机 已 经 很 常见 了 ， 
不 过 我 们 不 妨 以 300 万 像素 的 数码 相机 举例 
说 明 。300 万 像素 的 数码 相机 可 以 照 出 2048 
像素 宽 、1536 像素 高 的 照片 。 这 在 浏览 器 里 
有 多 大 呢 ? 视 情 况 而 定 。 不 过 一 般 而 言 ， 这 
样 的 尺寸 太 大 了 (参见 图 5.1.3 ) ， 你 在 邮件 
中 查看 这 么 大 的 图 像 就 是 这 个 样子 。 
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Image Size Matters 





Image Size Matters 





图 5.1.3 ”这 个 图 像 为 2048 像素 宽 ，1536 像素 高 ， 

这 意味 着 要 看 到 照片 的 其 他 部 分 ， 既 需要 纵 问 深 动 
条 ， 又 需要 横 疝 深 动 条 ， 更 别提 文件 尺寸 了 ， 需 要 
很 长 时 间 才 能 将 图 像 显示 完整 。 这 可 谓 只 见 树 木 、 

不 见 森 林 啊 (真是 邻 人 骨 溃 ) 


那么 ， 对 于 网 站 上 的 图 像 ， 多 大 合适 呢 ? 
简单 地 说 ， 通 背 应 控制 在 几 百 个 像素 宽 ( 参 
见 图 5.1.4) 。 图 像 尺寸 越 大 ， 文 件 就 越 大 ， 
网 页 加 载 它 的 时 间 就 越 长 。 选 择 图 像 尺 寸 是 
一 个 取 人 钨 的 过 程 。 此 外 ， 你 已 看 到 ， 如 果 图 
像 尺 寸 过 大 ， 访 问 考 就 需要 使 用 槛 回 滚 动 条 
来 查看 (参见 图 5.1.3 ) 。 

当然 ， 图 像 的 尺寸 也 取决 于 其 用 途 。 图 
标 通 常 很 小 ， 标识 稍 大 一 些 ， 照 片 则 大 得 多 。 
有 时 ， 为 了 产生 视觉 冲击 ， 我 们 可 能 需要 使 
用 一 张 达 到 或 超过 整个 网 站 内 容 宽度 的 大 网 。 
这 样 的 图 像 通常 不 超过 960 像素 宽 。 

打印 出 来 的 图 像 通常 比 显 示 帮 上 看 到 的 
要 小 一 些 。 打 印 机 的 每 英寸 点 数 ( dpi ) 通 和 党 
比 显 示 融 的 每 英寸 像素 数 (ppi ) 要 多 。 屏 幕 
分 辨 率 变 大 加 剧 了 这 一 情形 。 这 就 是 为 什么 
相同 的 图 像 在 显示 上 需 或 笔记 本 上 看 要 比 在 纸 
上 看 要 大 得 多 。 
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@eA Image Size Matters 


Image Size Matters 





i ~ 5 2 
二 二 夫妇 2 
人 


Yellowstone National Park's multi-colored pools 
seem like they are from another planet. 








5.1.4 看 ， 原 来 这 张 图 还 有 这 么 多 内 容 ! 我 减 
小 尺寸 (参见 5.9 节 ) 后 很 容易 就 能 看 到 整个 图 像 。 
这 个 版 本 有 400 像素 宽 ，300 像素 高 ， 维 持 了 原 图 
4 : 3 的 宽 高 比 ， 保 存 了 图 像 的 基本 形状 。 我 们 在 
第 12 草 会 了 解 到 ， 可 以 使 用 CSS 控制 图 像 的 宽度 
和 高 度 , 让 图 像 放 大 或 缩小 , 使 之 在 所 有 的 屏幕 (从 
手机 到 大 的 显示 器 ) 上 都 能 以 最 好 的 效果 显示 





可 缩放 矢量 图 形 (SVG) 

对 于 使 用 SVG 图 像 语言 创建 的 图 像 ， 
无 论 放大 还 是 缩小 都 不 会 影响 其 质量 (以 
及 其 他 的 一 些 参 数 ) 。 而 有 全 ， 对 于 某 个 
SVG 图 像 来 说 ， 无 论 它 在 页 面 中 显示 的 尺 
2 2 
几乎 所 有 的 现代 浏览 器 都 提供 基本 的 SVG 
支持 ， 因 此 你 可 以 在 网 页 中 使 用 SVG。 
不 过 ，IE8 还 不 支持 SVG。 可 以 使 用 SVG 
Web (http://code.google.com/p/sveweb/ ) 
或 Raphagsl ( http://raphaeljs.com/) 
等 JavaScript 库 在 IE8 中 实现 类 似 的 效果 。 
NG (1 
HTML 视频 和 SVG ) ， 参 见 17.14 节 。 


4. 透明 度 

可 以 利用 透明 度 为 图 像 创建 非 矩形 的 边 
缘 ， 在 图 像 的 下 面 设 置 背 景色 或 图 案 。PNG 
和 GIF 都 支持 透明 度 ，JPEG 则 不 支持 。 


在 GIF 格式 中 , 一 个 像 系 要 么 是 透明 的 ， 

有 要么 是 不 透明 的 。 这 称 作 索引 色 透 明 ( index 
transparency ) 。 而 PNG 则 既 文 持 索引 色 透 明 ， 
又 文 持 alpha 透明 (alpha transparency ) 。alpha 
透明 可 以 控制 一 个 像 系 透明 的 程度 。 也 就 是 
说 ,一 个 像 系 可 以 部 分 透明 ， 而 非 术 人 么 透明 
要 么 不 透明 。 这 意味 看 具有 复杂 透明 背景 的 
图 像 使 用 PNG 的 效果 ( 参见 图 5.1.5 ) 要 好 于 
使 用 GIF 的 效果 ， 因 为 使 用 PNG 可 以 让 边缘 
变 得 平 请 ， 避 免 产 生 锯 齿 。 








全 日 日 Image Transparency on SolidiBackground 


| 5 Image Transparency on Solid Ba... 





人 日 日 Image Transparency on Gradient Background 





1 Image Transparency on Gradien... 








5.1.5 纯 蓝 色 背 景 和 从 黑 到 红 渐 变色 背景 都 不 
是 星星 PNG 图 的 一 部 分 ， 它们 只 是 用 CSS 癌 页 面 
的 body 添加 的 颜色 。 星 星 图 具有 alpha 透明 度 ， 这 
样 ， 无 论 背 景 是 纯色 、 渐 变色 ， 还 是 男 一 张 图 像 ， 
就 都 能 穿 透 ， 且 看 起 来 相当 “干净 ”。JPEG 无 法 
实现 这 一 点 ，GIE 仅 文 持 一 种 简单 的 透明 度 ， 歼 果 
并 不 太 好 (除非 背景 是 纯色 的 ) 。 男 见 彩 插 

















图 灵 社 区 会 员 wenshanjun 专 享 尊重 版 权 


PNG-8 既 文 持 索 引 色 透明 ， 也 文 持 alpha 
透明 ， 但 需要 使 用 Fireworks 这 样 的 程序 才能 
将 图 像 保 存 为 PNG-8 格式 。Photoshop 不 文 
持 alpha 透明 的 PNG-8， 但 文 持 alpha 透明 的 
PNG-32。 (参见 补充 材料 “Photoshop、PNG-24 
与 PNG-32”。 ) 这 也 是 万 维 网 上 大 多 数 透明 
PNG 都 是 PNG-32 的 原因 。 

总 之 ， 对 于 透明 图 像 ， 应 使 用 PNG-8 或 
PNG-32。 后 者 允许 使 用 超过 256 种 颜色 。 


Photoshop、PNG-24 与 PNG-32 

PNG-24 与 PNG-32 几乎 是 一 样 的 ， 
只 是 后 者 支持 alpha 和 透明 。 和 奇怪 的 是 ， 
Photoshop 将 PNG-24 和 PNG-32 都 称 为 
PNG-24， 因 此 通常 容易 认为 PNG-24 是 支 
持 alpha 透明 的 。 实 际 上 ， 在 Photoshop 里 ， 
如 果 为 PNG-24 选中 透明 度 选项 ， 它 会 自 
动 创建 PNG-32 图 像 。 

J 
很 多 人 甚至 没有 听 说 过 PNG-32。 因 此 ， 
“PNG-24” 也 常常 用 于 指 代 市 有 alpha 透 
明 的 图 像 不过， 从 技术 上 看 这 种 说 法 并 
不 准确 。 


5. 动画 

动画 可 以 保存 为 GIF， 但 不 能 是 JPEG 或 
PNG。 实 际 上 ， 使 用 图 像 表 现 动画 已 经 用 得 
越 来 越 少 了 。 【一 种 例外 的 情况 是 那些 好 玩 
的 GIF 动画 ， 它 们 在 Tumblr 这 类 网 站 相当 流 
行 。) 我 们 通常 使 用 CSS 动画 、JavaScript、 
HTMLS Canvas、SVG (可谓 是 一 匹 黑马 ) 和 
Flash 创建 动画 。 近 几 年 ， 使 用 Flash 创建 的 
动画 越 来 越 少 了 。 这 主要 是 由 于 iOS 不 支持 
Flash， 且 其 他 标准 的 Web 技术 的 能 力 和 浏览 
希 文 持 程度 都 提升 了 很 多 。 
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6. 小 结 

让 我 们 来 回顾 一 下 有 关 Web 图 像 的 要 点 。 

口 大 多 数 照 片 都 应 保存 为 JPEG 格式 ， 
图 标 、 标 识 等 颜色 较 少 的 图 像 应 保存 
为 PNG 格式 。 

口 应 使 用 PNG-8 或 PNG-32 ( 常 误 作 
PNG-24 ) 创 建 具 有 alpha 透明 度 的 图 像 。 

D 合理 的 图 像 大 小 (尺寸 ) 会 让 图 像 文 
件 变 得 更 小 。 应 尽 可 能 地 减 小 图 像 尺 
寸 ， 从 而 让 页 面 加 载 得 更 快 。 


5.2 ”获取 图 像 


如 何 获取 在 网 页 中 使 用 的 图 像 呢 ? 有 几 
种 方式 。 可 以 购买 或 下 载 现 成 的 网 像 ， 通 过 
扫 摘 仪 将 照片 或 手绘 图 像 数 字 化 ， 使 用 数码 
相机 拍摄 照片 ， 或 使 用 Adobe Photoshop 这 样 
的 图 像 编辑 软件 从 头 绘制 图 像 。 在 有 了 图 像 
以 后 ， 就 可 以 将 它们 保存 为 上 文 提 到 的 某 种 
格式 并 在 万 维 网 上 使 用 它们 了 。 


获取 图 像 的 手段 

口 可 以 使 用 搜索 引擎 寻找 万 维 网 上 的 网 
像 , 方法 是 点 击 搜索 框 上 方 的 “图 像 ” 

( Images ) 链接 ， 再 跟 平帝 一 样 输入 
搜索 词 。 注 意 ， 一 般 来 说 ， 对 于 在 万 
维 网 上 找到 的 网 像 ， 即 便 是 免费 的 ， 
也 会 受到 某 种 形式 的 版 权限 制 (参见 
后 面 的 “知识 共享 许可 协议 ”) 。 购 
买 的 图 像 通 稼 可 以 随意 使 用 ， 但 一 般 
不 能 对 图 像 本 映 再 次 进行 销售 。 请 仔 
细 阅 该 声明 或 许可 协议 。 

口 很 多 公司 以 较 低 的 价格 销售 库存 的 照片 
和 图 像 。 通 常 ， 每 张 图 像 都 有 几 个 版 
本 , 以 满足 不 同 的 用 途 和 分 辨 率 要 求 。 

口 数码 相机 ( 包括 智能 手机 的 相机 ) 可 
能 是 创建 个 人 图 像 最 为 党 用 的 方法 。 
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知识 共享 许可 协议 

知识 共享 (Creative Commons ，www. 
creativecommons.org ) 是 一 个 非 营 利 组 织 ， 
ET 
以 按照 其 指定 的 方式 分 享 他 们 的 作品 ， 同 
时 无 需 放 弃 对 作品 的 所 有 权利 。 网 站 设计 
师 、 音 乐 家 和 摄影 师 使 用 知识 共享 许可 协 
议 将 他 们 的 作品 放 入 市 场 ， 而 无 需 担心 别 
人 以 他 们 不 允许 的 方式 利用 这 些 作品 。 

Flickr 有 是 流行 的 图 所 分 部 Web 应 用 

(www.flickr.com ) 。 它 要 求 用 户 为 他 们 上 

传 的 每 张 图 片 指 定 一 种 知识 共享 许可 协议 ， 
然后 访问 者 可 以 根据 许可 协议 的 类 型 搜索 
图 

此 外 ， 使 用 Google 搜 索引 擎 可 以 根 
据 使 用 权限 对 搜索 进行 限定 (进入 www. 
google.com/advanced_search， 再 在 底部 “使 
用 权限 ” (Usage Rights ) 下 拉 菜 单 中 选择 
需要 的 选项 ) 。 


5.3 选择 图 像 编辑 器 


有 很 多 不 同 的 软件 可 以 用 来 创建 和 保存 
Web 图 像 。 大 多 数 现代 图 像 编 辑 融 都 提供 了 
创建 Web 图 像 的 专用 工具 。 这 些 工具 考虑 了 
本 章 前 面 讨论 的 几 种 要 又。 
坚 无 疑问 ， 行 业 标准 是 Adobe Photoshop 
(www.adobe.com ) 。 跟 它 功 能 相近 的 Adobe 
Fireworks 也 非常 强大 。 它 们 都 既 有 OS X 版 
也 有 Windows 版 。 在 2013 年 春 ，Adobe 宣称 
尽管 它们 还 将 继续 销售 Fireworks， 但 不 会 再 
添加 新 的 功能 。 这 是 在 购买 该 软件 时 需要 考 
虚 的 一 点 。 还 有 很 多 软件 可 以 作为 Photoshop 
和 Fireworks 的 蔡 代 品 ( 通常 也 要 便宜 得 多 ) ， 
参见 补充 材料 。 
对 于 为 网 站 准备 的 图 像 ， 











这 些 软 件 部 可 


以 对 其 进行 最 基本 的 处 理 ， 如 缩放 、 剪 裁 、 
调整 颜色 、 应 用 效果 、 优化 等 。 对 于 收费 软件 ， 
通常 都 有 免费 的 试用 版 。OS X 自 带 一 个 非常 
基础 的 图 像 编 辑 器 ， 名 为 Preview。 还 可 以 在 
网 上 搜索 “image editors”( 图像 编辑 硕 ) ， 
找到 更 多 的 选择 。 

不 过 ,需要 强调 一 点 ,无 论 使 用 哪 种 软件 ， 
优化 Web 网 像 的 基本 策略 始终 不 会 改变 。 它 
们 所 用 的 命令 名 称 可 能 有 所 不 同 ， 步 又 也 有 
多 有 少 ， 但 思路 是 一 样 的 。 











Photoshop 和 Fireworks 的 替代 品 


创建 图 像 并 不 仅 限 于 Photoshop 和 
Fireworks。 以 下 列举 了 一 些 可 以 替代 它们 
9 

UU Gimp 

(Linux 或 OS X:， www.gimp.org Win- 
dows: http://simp-win.sourceforge.net/ 
stable.html ) ， 免 费 

DD Acorn 

(OS X: http://flyinemeat.com/acorn/ ) 
DQ Pixelmator 
(OS X: www.pixelmator.com ) 
DQ Pant.NET 
(Windows: www.getpaint.net ) ， 
免费 
D PaintShop Pro 
(Windows: www.corel.com ) 

每 款 程序 都 有 其 自身 的 使 用 方式 ， 

此 你 的 选择 取决 于 你 的 使 用 偏好 。 


5.4 保存 图 像 

创建 图 像 后 需要 保存 图 像 ， 这 一 过 程 是 
在 图 像 的 视觉 质量 与 文件 大 小 之 间 寻 找平 稀 
的 艺术 。 
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如 果 你 的 计算 机 上 没有 安 猴 Photoshop， 
可 以 先 使 用 试用 版 。 


1. Adobe Photoshop 

Photoshop 在 File 采 单 中 提供 了 Save for 
Web ( 存储 为 Web ) 命令 。 它 让 用 户 可 以 从 视 
党 上 对 比 原始 图 像 和 一 至 三 个 优化 后 的 版 本 ， 
还 可 以 看 到 对 文件 大 小 和 下 载 时 间 的 影 啊 。 


2. 使 用 Photoshop 的 Save for Web 命 
令 的 步骤 

(1) 打开 Photoshop， 创建 图 像 。 或 者 打 
开 现 有 的 图 像 , 并 通过 剪裁 、 调 整 大 小 和 编辑 ， 
为 发 布 做 好 准备 。 

(2) 选择 File 一 Save for Web ( 在 之 前 的 
版 本 中 称 为 Save for Web & Devices ) 。 出 现 
Save For Web 对 话 框 ， 参 见 图 5.4.1。 





5.4.1 
项 卡 ， 显 示 原 始 图 像 


(3) 点 击 2-Up (2 联 ) 选项 卡 查看 一 个 优 
化 后 的 版 本 ， 或 点 击 4-Up (4 联 ) 选项 卡 查 
看 三 个 优化 后 的 版 本 ， 参 见 图 5.4.2。 

(4) 根据 需要 ， 点 击 一 个 优化 后 的 版 本 ， 
参见 图 5.4.2。 


Save for Web 对 话 框 默认 对 应 Original 选 
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图 5.4.2 ”选择 4-Up 选项 卡 (上 ) ， 可 以 比较 原始 
图 像 与 你 所 选择 的 三 个 优化 方案 。 这 里 选择 了 左下 
方 的 图 ， 从 而 可 以 修改 其 设置 (图 5.4.3) 


oi 








GIF 


PNG-24 
WBMP 


opm I Mate: Es] 


[) Embed Color Profilé 











| JPEG 


| Very High | Quality: | 80 | 
[] Progressive 
加 Optimized 


0D Embed Color Profile 


5.4.3 ”Save for Web 对 话 框 的 右 侧 是 改变 优化 
设置 的 控件 .可 以 从 下 拉 沫 单 ( 上 ) 中 选择 图 像 格式 ， 
然后 通过 直接 输入 一 个 数值 或 者 拖 动 滑动 条 (下 ) 
指定 图 像 的 质量 。 数 值 越 大 ， 质 量 就 越 高 ， 而 文件 
也 越 大 。 此 外 ， 还 可 以 在 Quality 左 侧 的 下 拉 菜 单 
中 选择 预 设 值 ， 如 “Very High” (非常 高 ) 。 尽 
管 我 们 通常 认为 JPEG 是 保存 照片 的 最 佳 格式 ,但 
如 果 质 量 设 的 太 低 , 大 块 的 颜色 ( 如 本 图 中 的 蓝天 ) 
就 会 变 得 有 些 模糊 不 清 
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(5) 选择 希望 采用 的 格式 ， 参 见 图 5.4.3。 

通常 , 在 计算 机 上 创建 的 图 像 ( 包括 标志 、 
图 表 、 图 形 、 线 条 艺术 ， 以 及 任何 包含 由 单 
色 和 锐利 细 市 构成 的 大 块 区 域 的 图 像 ) 应 保 
存 为 PNG-8 格式 ， 参见 图 5.4.1。 

具有 连续 色调 的 图 像 (如 照片 ) 应 保存 
为 JPEG 或 PNG-24 格式 。 








(6) 调整 其 他 设置 选项 ， 直 到 在 图 像 质量 可 
接受 的 条 件 下 获得 最 小 的 文件 ， 人 参见 图 5.4.4。 

(7) 点 击 Save。 选 择 一 个 目录 ， 并 对 新 文 
件 进行 命名 。 它 将 自动 包含 所 选 格式 的 扩展 
名 ( 而且 ， 这样 通常 就 不 会 窗 盖 原始 图 像 ) 。 

输出 PNG 图 像 的 步骤 相同 ( 参见 图 5.4.5 
和 图 5.4.6 ) 。 








图 5.4.4 这 里 的 修改 反映 的 是 左下 方 的 区 块 。 如 果 保 存 它 ， 其 大 小 就 是 62.39K， 尺 管 在 图 5.4.2 中 它 只 











有 19.44K， 但 现在 它 的 边缘 更 锐利 了 ， 这 种 质量 上 的 提升 是 值得 的 。 这 里 还 修改 了 其 他 两 个 区 块 的 设置 。 
PNG-8( 右上 ) 的 压缩 让 图 像 的 像素 化 程度 加 深 了 ，, 而 且 文 件 大 小 (70.56K ) 也 比 JPEG 要 大 。PNG-24( 右 下 ) 
保持 了 很 高 的 质量 ， 但 文件 大 小 (224.3K ) 也 大 得 多 。 显 然 ，JPEG 是 保存 照片 的 最 佳 选择 。 男 见 彩 插 








应 该 使 用 RGB 模式 创建 图 像 ， 而 不 


是 CMYKS2 模式 ( 用 于 印刷 ) 。 


在 优化 和 输出 图 像 时 ， 没有 所 谓 的 唯 
一 正确 或 者 错误 的 设置 ， 记 住 你 的 主要 目标 
是 在 保留 可 以 接受 的 图 像 品质 的 前 提 下 让 图 


像 尺 寸 尽 可 能 小 。 


(I) R、G、B 分 别 表 示 Red ( 红 )、Green ( 绿 )、Blue ( 蓝 )。RGB 模式 义 称 三 原色 光 模 式 。 一 一 译 者 注 
QQ) C、M、Y、K 分 别 表 示 Cyan ( 青 )、Magenta ( 品 红 )、Yellow ( 黄 )、Black ( 黑 )。CMYK 模式 又 称 印 刷 四 分 色 


模式 。 一 一 幸 者 注 
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压缩 图 像 文件 大 小 的 工具 有 很 多 
(甚至 可 以 对 已 经 在 图 像 编 辑 器 中 优化 过 的 
图 像 作 进一步 压缩 ) 。 其 中 有 的 运行 在 你 的 
机 器 上 上， 如 ImasgeOptim ( http://imageoptim. 
com， 只 有 OSX 版 ) 和 JPEGmini (www. 
jpegmini.com ) ， 有 的 则 是 基于 Web 的 ， 如 
www.smushit.com。 可 以 在 网 上 搜索 “image 
optimization tools，( 图 像 优化 工具 ) ， 找 到 
更 多 这 样 的 工具 。 推 荐 使 用 其 中 的 东 个 工具 。 


如 果 不 确定 应 该 选择 哪 种 格式 ， 可 以 
mn 吉 果 ， 看 看 哪 种 格式 的 压缩 这 
果 更 好 。 另 外 ,不 同 的 编辑 器 生成 的 优化 图 
像 的 尺寸 可 能 不 同 








2 Ai 4 
Fodca: Podcai 


100 gunty 





er rh pe 7 二 


Eo Podcea 


A 
256 colors ST be 











5.4.5 ”这 个 图 像 (已 被 放大 ) 有 很 多 平 铺 的 颜 
色 及 文字 ， 它 们 需要 保持 锐利 。 可 以 看 到 ，PNG-8 
格式 (左下 ) 对 图 像 的 压缩 是 最 好 的 ， 文 件 大 小 只 
有 5.5K。 如 果 减 少 颜色 的 数量 ， 其 大 小 还 将 进 一 
步 减 小 。PNG-24 可 以 提供 更 多 的 颜色 ,使 用 这 种 
格式 的 话 ， 文 件 大 小 为 11.17K。 使 用 最 高 质量 的 

















JPEG 则 为 19.76K。 如 果 将 JPEG 的 质量 降 为 50( 这 


里 没有 显示 ) ， 文 件 大 小 可 比 PNG-8 更 小 一 点 ， 
但 其 效果 看 上 去 却 很 可 怕 。 男 见 彩 插 
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Preset: | PNG-24 





| PNG-24 


呆 Transparency 





4 Sec 回 56.6 Kbps ~ 三 





5.4.6 ”对 于 具有 alpha 透明 的 图 像 ， 如 这 里 的 
星星 网 (下 ) ， 选 择 PNG-24 中 Transparency 

(上 ) 。 其 他 的 图 像 编 辑 带 可 能 将 这 个 选项 称 为 
PNG-32 ( 注意 ， 要 在 打开 for Web 对 话 框 之 
前 设置 好 图 像 的 透明 区 域 ) 





Save for Web 命令 会 创建 新 的 图 像 ， 
ep 始 图 像 不 变 〈 除 非 你 在 旧 图 像 文 件 
的 同一 个 文件 夹 使 用 相同 的 文件 名 和 扩展 名 
保存 新 的 图 像 ) 。 


在 PSD (Photoshop 文 档 ) 中 ， 可 
en 分 位 于 不 同 的 图 层 ， 从 而 
可 以 对 它们 进行 显示 和 隐藏 。 通 和 常 ， 在 优化 
后 的 版 本 中 ， 只 保存 了 图 像 的 可 视图 层 。 
Fireworks 可 以 让 PNG 拥有 额外 的 信息 ， 从 而 
可 以 保存 图 层 。 注 意 ，Photoshop 无 法 显示 这 
些 图 层 。 


5.5 在 页 面 中 插入 图 像 


可 以 在 网 页 中 放置 各 种 各 样 的 图 像 ， 从 
标志 到 照 厂 都 可 以 。 当 访问 者 浏览 网 页 时 ， 
浏览 带 会 目 动 加 载 像 图 5.5.1 这 样 在 HTML 文 
档 中 描述 的 图 像 ， 结 来 参见 图 5.5.2。 不 过 
图 像 加 载 时 间 跟 访问 者 的 网 络 连接 强度 、 图 
像 尺 寸 ， 以 及 页 面 中 包含 的 图 像 个 数 相 关 。 


尊重 版 权 
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<body> 
<h1i>Barcelona's Market</h1> 


<img src="corner-market.jpg” /> 


<p>This first picture shows one of the fruit 
Stands in the <span lang="es">Mercat de la 
" Boqueria</span>, the central market that 
"is just off the Rambles. It's an incredible 
» place, full of every kind of food you 
» might happen to need. It took me a long 
; time to get up the nerve to actually take 
"a picture there. You might say Im kind 
of a chicken, but since I lived there, 
» it Was just sort of strange. Do you take 
“ pictures of your supermarket?</p> 

</body> 

</html> 





5.5.1 这 个 图 像 的 URL 只 包含 文件 名 ,没有 路 
径 ， 因 此 代表 该 图 像 位 于 与 此 网 页 相同 的 文件 夹 。 
关于 如 何 引 用 不 同文 件 夹 中 的 图 像 参 见 第 一 条 提示 








全 日 自 Barcelona's Market 


Barcelona's Market 





Barcelona's Market 


The Mercat de la Boqueria is the central market that 
is just off the Rambles. Its an incredible place, full 
of every kind of food you might happen to need. It 





图 5.5.2 图像 贴 向 页 面 的 左 侧 ， 与 文本 的 对 齐 方 
式 一 致 。 使 用 float (参见 11.11 节 ) 等 CSS 属性 
可 以 改变 对 齐 方式 或 让 文字 环绕 图 像 





在 页 面 中 插入 图 像 的 步骤 
(1) 在 HIML 代码 中 ， 将 光标 放 在 希望 图 


像 出 现 的 位 置 。 
(2) 输入 <img src="image.ur1"， 其 中 
image.Url 指示 图 像 文 件 在 服务 各 上 的 位 置 。 
(3) 输入 一 个 空格 和 /> (或 者 >， 在 
HTMLS 中 两 者 均 有 效 ) 。 


图 5.5.1 中 的 例子 显示 了 最 简单 的 图 
像 路 径 形式 ， 即 只 有 文件 名 。 不 过 ， 在 实践 
中 ， 为 了 保持 良好 的 文件 组 织 结构 ， 通 常 将 
图 像 保存 在 单独 的 文件 夹 中 。jimg 标签 的 src 
属性 中 的 URL 也 应 该 反映 这 一 路 径 。 假设 
图 55 小 中 的 页 面包 在 的 详 忻 大 了 过 乌 人 一 个 
名 为 images 的 文件 夹 ， 且 图 像 位 于 images 
文件 夹 中 ， 则 显示 该 图 的 HIML 应 为 <img 
src="images/corner-market.jpg”/>。 更 多 
关于 如 何 引 用 文件 的 信息 ， 参 见 1.7 节 。 





图 像 必须 先 上 传 到 服务 器 上 ,访问 者 
才 有 可 能 看 到 它们 。 上 传 图 像 跟 上 传 HTML、 
CSS、JavaScript 以 及 其 他 文件 一 样 ,参见 21.3 节 。 


不 要 期 望 你 的 访问 者 会 长 时 间 等 待 页 
面 加 载 和 显示 。 可 以 对 页 面 进行 测试 ( 别 忘 
了 你 的 连接 速度 可 能 比 访问 者 的 快 ) 。 如 果 
你 都 等 不 下 去 ,那么 访问 者 也 一 样 等 不 下 去 。 

另 一 种 办 法 是 为 大 图 创建 缩 略 图 ， 让 访问 者 可 
以 通过 链接 选择 查看 大 图 ， 查 看 6.3 节 学 习 如 
何 创建 这 种 链接 。Charles ( www.charlesproxy. 
com ) 和 Fiddler ( http://fiddler2.com ) 是 模拟 慢 


连接 的 两 个 不 错 的 工具 。 
可 以 使 用 CSS 的 border 简写 属性 (及 


相关 属性 ) 为 图 像 应 用 边框 样式 ， 这 将 在 
第 11 章 讲 到 。 旧 的 浏览 器 会 对 带 链 接 的 图 像 
自动 加 上 一 个 边框 ， 可 以 在 CSS 中 指定 img 
{ border: none; } 移 除 该 边框 。 


图 灵 社 区 会 员 wenshanjun 专 享 尊重 版 权 


5.6 ”提供 蔡 代 文本 


使 用 alt 属性 ， 可 以 为 图 像 添 加 一 段 描 
述 性 文本 ， 当 图 像 出 于 某 种 原因 不 显示 的 时 
修 ， 就 将 这 上 段 文 字 显 示 出 来 。 屏 幕 阅读 兢 可 
以 朗读 这 些 文本 ， 帮 助 视 障 访问 者 理解 图 像 
的 内 容 。HTMLS5 规范 推荐 将 alt 文本 理解 为 
图 像 的 蔡 代 性 描述 :“ 一 般 来 说 ， 蔡 代 文 本 是 
考虑 图 像 未 能 正常 加 载 的 情况 下 需要 呈现 的 
文字 。” 通 常 ， 这 意味 者 alt 文本 可 以 插入 
到 图 像 两 侧 的 文本 流 中 ， 在 大 多 数 情 况 下 ， 
它 不 应 是 对 图 像 的 描述 。 


提供 图 像 无 法 显示 时 的 替代 文本 的 步骤 

(1) 在 img 标签 内 ， 在 src 属性 及 其 值 的 
后 面 ， 输 入 alt="。 

(2) 输入 图 像 出 于 某 种 原因 没有 显示 时 应 
该 出 现 的 文本 〈 人 参见 图 5.6.1 和 图 5.6.2 ) 。 

(3) 输 入"。 























<body> 
<h1i>Barcelona's Market</h1> 
<img src="market.jpg" alt="Oranges, 


bananas, apples, and other fruit abound 
”at the Mercat de la Boqueria.” /> 


<p>The <span lang="es">Mercat de la Boqueria 
» </span> is the central market that is just 
» off the Rambles. It's an incredible place, 
>» full of every kind of food you might 

>» happen to need...</p> 

</body> 

</html> 


图 5.6.1 我 引用 了 一 个 不 在 我 的 网 站 的 图 像 
(market.jpg ) ， 以 显示 alt 文本 的 效果 
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I x 
二 时 httpW/htmlcssvq 只 了 苔 此 


Barcelona's Market 
| 回 Oranges, bananas, apples, and other fruit abound at the Mercat de |a 了 | 


The Mercat de la Boqueria ls the central market that ls just off the 
Rambles. Its an incredible place. full of every kind offood you 





5.6.2 在 Internet Explorer 10 中 ， 替 代 文 本 出 现 
在 一 个 带 又 的 小 方块 旁边 , 旦 两 者 由 一 个 方 框 包围 。 
在 Firefox 和 Opera 等 其 他 浏览 器 中 ， 蔡 代 文 本 是 
单独 出 现 的 。Chrome 和 Safari 不 会 显示 alt 文本 ， 
而 是 显示 缺失 图 像 的 图 标 


HTML5 规范 包含 了 对 在 不 同 场景 中 
如 何 有 效 使 用 alt 的 大 量 讨论 (www.w3.org/ 
TR/html5/embedded-content-0.html#alt ) ， 建 议 
读者 去 看 一 看 。 


如 果 图 像 对 内 容 的 价值 较 小 ， 对 视 障 
用 户 来 说 不 太 重 要 ， 则 可 以 提供 空 的 替代 文 
本 ， 即 alt=""。 如 果 图 像 与 邻近 的 文本 表达 
的 信息 相似 , 也 可 以 将 alt 属性 留 空 。( 注意 ， 
图 5.6.1 中 的 例子 便 符 合 这 一 标准 ， 尤 其 是 段 
落 中 提 到 了 水 果 类 型 的 情况 。 ) 


不 要 用 alt 文本 代替 图 像 的 caption。 
在 这 种 情况 下 ， 应 考虑 将 img 放 入 一 个 
figure 元 素 ， 并 添加 一 个 figcaption 元 素 。 
4.4 节 有 一 个 这 样 的 例子 。 


如 果 图 像 是 页 面 设计 的 一 部 分 ， 而 不 
是 内 容 的 一 部 分 ， 则 应 使 用 CSS background- 
image 属性 引入 该 图 像 ， 而 不 是 使 用 img 标记 。 
参见 10.10 节 。 
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为 什么 图 像 无 法 显示 

图 像 无 法 显示 的 原因 有 很 多 种 。 也 许 
是 因为 你 在 src 属性 中 填写 的 URL (参见 
图 5.6.1 ) 是 错误 的 ， 也 许 是 因为 你 忘 了 将 
图 像 上 传 到 服务 器 。 其 他 原因 则 超出 了 你 
的 控制 范围 ， 如 访问 者 的 网 络 连 接 状 况 可 
能 很 糟糕 。 此 外 ， 你 知道 可 以 让 浏览 器 不 
加 载 图 像 吗 ? 大 多 数 浏览 器 都 可 以 在 偏好 
设置 中 设 定 是 否 加 载 图 像 。 通 常 ， 为 了 加 
快 页面 加 载 速度 , 用 户 可 能 选择 这 一 选项 。 
使 用 手机 或 平板 电脑 的 用 户 ， 为 了 防止 侵 
知 太 多 流量 ， 也 有 可 能 选择 这 一 选项 。 


5.7 指定 图 像 尺 十 


有 时 ， 加 载 网 页 会 先 看 到 文本 ， 等 一 小 
段 时 间 以 后 图 像 开 始 加 载 时 ， 文 本 跳 到 图 像 
周围 ， 留 出 可 容纳 图 像 的 空间 。 出 现 这 种 现 
象 , 是 因为 没有 在 HTML 中 指定 图 像 的 尺寸 。 
如 果 用 户 使 用 旧 浏 览 器 或 者 网 络 连接 速度 慢 ， 
就 容易 出 现 这 种 情况 。 

如 果 指 定 图 像 的 尺寸 ， 浏览 絮 就 可 以 预 
留 空 间 ， 在 图 像 加 载 的 同时 让 文本 显示 在 周 
转 ， 保 持 布局 的 稳定 。 

可 以 通过 浏览 需 或 网 像 编 辑 软件 获取 图 
像 的 精确 尺寸 。 


1. 在 浏览 器 中 查看 图 像 尺 十 

(1) 右 击 图 像 ， 出 现 背 景 弹出 菜单 ， 人 参见 
图 5.7.1。 

(2) 选择 View Image Info ( 查看 图 像 信息 ， 
具体 选项 取决 于 所 使 用 的 浏览 句 ) ， 出 现 的 
框 中 会 以 像素 为 单位 显示 图 像 的 尺寸 ， 参 见 
图 5.7.2。 








Barcelona's Market 


-—— 





Barcelona's Market 


Barcelona's Market 


~ 
View Image 


Copy Image 
Copy Image Location 


Save Image As... 

Email Image... 

Set As Desktop Background... 
ME 


Inspect Element 
次 Web Developer 


-Wy Inspect Element with Firebug 





图 5.7.1 在 浏览 器 中 右 击 图 像 ， 出 现 背景 弹出 菜 
单 。 浏 览 器 会 提供 检查 图 像 、 显 示 属 性 或 获取 尺寸 
的 方式 





JPEG lmage 
Unknowrn at cached) 
300px x 399pnx 





Dimensioms: 


5.7.2 ”这 个 框 ( 它 的 外 观 取决 于 所 用 的 浏览 各 ) 
以 像 隶 为 单位 显示 了 图 像 的 矿 才 


2. 在 Photoshop 中 查看 图 像 尺寸 

(1) 在 Photoshop 中 打开 图 像 。 

(2) 选择 Image 一 Image Size ( 如 图 5.7.3 
所 示 ) 。 出 现 Image Size 对 话 框 (人 参见 图 57.4)。 





Mode 
Adjustments > 
Auto Tone 他 时 L 


Autco Contrast 所 侣 能 上 L 
Auto Color 仓 虹 BB 


Image Size... 
Canvas Size... 





5.7.3 ”在 Photoshop 中 ， 从 Image 下拉 菜单 中 
选择 Image Size 
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5.7.4 ”Image Size 对 话 框 显示 图 像 为 300 像 系 x 
399 像素 ( 可 以 改变 这 个 对 话 框 的 大 小 ， 确 保 在 
Width 或 Height 旁边 的 下 拉 菜 单 中 选择 的 单位 为 
Pixels， 再 输入 新 的 Width 值 ，Height 值 会 根据 图 像 
的 比例 自动 计算 出 来 。 更 多 信息 参见 最 后 一 条 提示 ) 


3. 在 HTML 中 指定 图 像 尺 十 
(1) 使 用 “在 浏览 右 中 查看 图 像 尺 寸 ” 或 
“在 Photoshop 中 查看 图 像 尺 寸 ”中 介绍 的 方 

法 ， 确 定 图 像 的 尺寸 。 

(2) 在 img 标签 中 ，src 属性 的 后 面 ， 输 
入 width="x”height="y"， 采用 第 (1) 步 中 确 
定 的 值 ， 以 像素 为 单位 指定 X 和 (分 别 代表 
图 像 的 宽度 和 高 度 ) 的 值 ， 参 见 图 5.7.5。 





<body> 
<h1i>Barcelona’ s Market</h1> 


<img src="corner-market.jpg” width="300" 

>» height="399" alt="0ranges, bananas, apples, 
"and other fruit abound at the Mercat de la 

» Boqueria.” /> 


<p>The “Span lang="es">Mercat de la Boqueria 
» </span> is the central market that is just 

off the Rambles. It's an incredible place 
-el p> 


</body> 
</html> 





5.7.5 通常 我 们 会 在 HTML 中 明确 指定 图 像 的 
高 度 和 宽度 ， 这 样 浏览 器 就 不 必 花 时 间 来 判断 网 像 
的 尺寸 ， 从 而 更 快 地 将 图 像 显 示 出 来 。 但 有 一 种 情 
况 我 们 应 该 忽略 width 和 height 属性 ， 即 显示 响 
应 式 图 像 的 情况 ， 我 们 会 在 12.2 市 讨论 这 个 问题 
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width 和 height 属性 不 一 定 要 反映 图 
像 的 实际 尺寸 。 


如 果 有 几 个 尺寸 相同 的 图 像 ， 可 以 通 
过 样式 表 同 时 设置 它们 的 高 度 和 宽度 。 当 然 ， 
单个 图 像 也 能 使 用 这 种 方法 。 

在 浏览 器 中 ， 如 果 在 单独 的 窗口 中 


打开 图 像 ， 就 可 以 看 到 图 像 的 尺寸 ， 参 见 
图 5.7.6。 


在 Photoshop 中 可 以 选中 整个 图 像 ， 
再 在 Info (信息 ) 面板 中 查看 图 像 的 尺寸 。 


如 果 使 用 如 图 5.7.4 所 示 的 Imnage Size 
对 话 框 修改 图 像 的 尺寸 ， 要 确保 Resample ( 重 
新 取样 ) 选 项 为 选中 状态 ,Resolution( 分 辩 率 ) 
选项 与 Web 图 像 无 关 。5.9 节 介 绍 了 另外 一 种 
在 Photoshop 中 改变 图 像 尺寸 的 方法 。 


@ A © corner-market.jpg JPEG Image, 300 x 399 pixels) 上 四 
5 corner-marketjpg UPEG Image,... 





5.7.6 ”如 果 在 单独 的 窗口 中 打开 图 像 ， 或 者 将 图 
像 拖 人 单独 的 窗口 ， 标 题 栏 里 就 会 显示 图 像 的 矿 才 
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5.8 在 浏览 器 中 改变 图 像 的 太吉 


通过 为 图 像 指 定 新 的 高 度 和 宽度 ( 以 像 
系 为 单位 ) ， 可 以 改变 图 像 显示 的 尺寸 ， 参 
见 图 5.8.1、 图 5.8.2 和 图 5.8.3。 这 样 做 可 以 
在 保持 所 有 显示 屏 上 网 像 太 寸 相同 的 情况 下 ， 
让 使 用 Retina 显示 屏 的 用 户 看 到 锐利 的 图 像 。 
具体 参见 补充 材料 “创建 和 缩放 为 Retina 显 
示 屏 准备 的 图 像 ”。 








stupas.jpg JPEG Image, 440 x 340 pixels) 





图 5.8.1 这 张 图 在 创建 时 使 用 的 是 双 倍 尺寸 ( 440 
像素 x 340 像素 ) ， 但 在 页 面 中 显示 的 尺寸 只 有 实 
味 尺 寸 的 一 半 【( 即 220 像素 x 170 像素 ) ， 这 样 就 
能 提升 Retina 显示 屏 及 其 他 高 像素 密度 显示 屏 上 
图 像 的 锐利 性 〈 黑色 的 轮廓 线 来 目 于 浏览 融 ， 而 不 
是 图 像 本 刁 ) 











在 浏览 器 中 改变 图 像 尺 寸 的 步骤 

(1) 输入 《img src="image.ur1"， 其 中 
image.url 是 图 像 在 服务 从 上 的 位 置 。 

(2) 输入 width="x" height="y"， 其 中 x 
和 上 分别 是 希望 设 定 的 宽度 和 高 度 〈 以 像素 
为 单位 ) 。 

(3) 根据 需要 ,添加 任何 其 他 的 图 像 属性 ， 
最 后 输入 />。 








<figure> 
<img src= stupas.jpg”alt= Two Stupas" 
> width="220" height="170" alt="" /> 


<figcaption>These stupas in Yunnan, 

> China, are Buddhist monuments used as 

>a place for worship.</figcaption> 
</figure> 








图 5.8.2 ”调整 height 和 width 属性 均 为 原来 的 一 
半 ， 由 于 图 像 的 高 度 和 宽度 比例 保持 不 变 ， 图 像 就 
不 会 失真 





These stupas in Yunnan, China, 
are Buddhist monuments used as 
a place for worship. 





图 5.8.3 ”显示 的 图 像 只 有 原 图 的 一 半 大 小 。 不 过 
要 注意 ， 加 载 它 需 要 花 的 时 间 跟 以 前 是 一 样 的 。 毕 
竟 ， 用 的 是 同一 个 文件 





除了 为 Retina 显示 屏 准 备 的 图 像 ， 使 
用 width 和 height 属性 改变 图 像 显 示 在 网 页 
中 的 大 小 是 一 种 快捷 但 有 些 丑 陋 的 做 法 。 由 
于 文件 本 身 并 未 改变 ， 因 此 访问 者 容易 有 受 
骗 的 感觉 通常 用 这 种 方法 缩小 的 图 像 总 
是 比 实际 这 个 尺寸 的 图 像 加 载 得 更 慢 。 较 好 
的 做 法 是 使 用 图 像 编辑 器 改变 图 像 的 尺寸 。 





图 灵 社 区 会 员 wenshanjun 专 享 尊重 版 权 


$.8 在 浏览 器 中 改变 图 像 的 尺寸 109 


Thomas Fuchs (http://retinafy.me ) 和 Daan Jobsis (http://blog.netvlies.nl/designinteractie/ 
retina-revolution/ ) 讨论 过 一 种 有 趣 的 技术 ,通过 这 项 技术 可 以 创建 为 Retina 显示 屏 准 备 的 图 像 ， 
同时 保持 文件 大 小 控制 在 一 个 合理 的 范围 之 内 。 其 做 法 为 : 让 图 像 尺 寸 变 为 两 倍 ， 但 使 用 高 压 
缩 设 置 (在 Photoshop 中 ， 就 是 选择 低 的 图 像 质 量 ) 。 当 以 一 半 大 小 显示 图 像 时 ， 不容 锣 察觉 
到 高 压缩 产生 的 失真 效果 的 影响 。 实 际 的 效果 取决 于 图 像 的 内 容 。 


创建 和 缩放 为 Retina 显示 屏 准 备 的 图 像 

你 可 能 在 一 些 人 提 到 羊 果 的 iPhone、iPad 和 MacBook 时 听 说 过 Retina 显示 屏 。Retina 
显示 屏 是 什么 呢 ? 

设想 你 仅 使 用 点 来 作画 ， 就 像 克 洛 德 . 莫 奈 或 乔治 修 拉 上 + 的 画 。 然 
的 画布 上 描绘 相同 的 画 ， 只 是 每 一 个 点 都 用 四 个 点 来 代替 。 第 二 张 画 能 
时 也 更 难看 清单 独 的 点 。 

苹果 的 Ritina 显示 屏 就 像 第 二 张 画 。 在 相同 的 空间 里 ， 它 拥有 的 像素 数量 是 普通 显示 屏 
的 像素 数量 的 四 倍 ( 如 图 5.8.4 所 示 ) ， 因 此 图 像 会 更 锐利 。 专 业 的 说 法 是 ， 它 的 每 英寸 点 数 

(PPI ) 更 多 ,或 者 说 像素 密度 更 大 。 除 了 苹果 ， 还 有 其 他 一 些 公司 的 设备 也 使 用 了 高 像素 密 

po 


ho 评 
并 
涪 
沿 
妇 
梧 
E 
人 














图 5.8.4 ”这 张 图 有 助 于 从 视觉 上 理解 Retina 显示 屏 ( 右 ) 是 如 何 使 用 四 个 像素 取代 大 多 数 显 示 屏 〈 左 ) 
的 一 个 像素 的 。 这 并 非 缩 放 ， 实 际 的 像素 要 小 得 多 ， 我 想 你 应 该 能 理解 


需要 说 明 的 是 ， 有 时 需要 考虑 Retina 显示 屏 或 类 似 的 其 他 显示 屏 ， 否 则 图 像 在 浏览 器 里 
看 起 来 就 会 显得 模糊 。 如 果 你 不 关心 其 中 的 原因 ， 至 少 应 记 住 ， 让 图 像 的 尺寸 扩大 为 原先 的 
人 

例如 ， 如 果 你 想 让 图 像 在 所 有 的 显示 屏 (并非 只 是 Retina 显示 屏 ) 上 都 是 40X30 的 尺 
寸 ( 此 处 及 以 下 尺寸 单位 均 为 像素 ) ， 就 应 该 创建 80x60 大 小 的 图 像 ， 而 代码 写作 <img 
src="photo.jpg”width="40” height="30"” alt="" />。 浏览 器 会 将 80 x60 的 图 像 缩小 ， 
以 40X30 的 尺寸 显示 (图 5.8.1 至 图 5.8.3 展示 了 这 种 方法 ) 。 


@ 克 洛 德 . 葛 奈 (Claude Monet ) 和 乔治 ， 修 拉 ( George Seurat ) 都 是 印象 派 画 家 ， 他 们 的 作品 往往 充满 了 细 左 
缤纷 的 小 点 。 一 一 译 者 注 
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其 中 的 原理 是 这 样 的 ， 在 80 x 60 的 图 像 中 ,像素 总 数 为 4800， 是 原先 的 四 倍 (40x30 
为 1200 像素 ) 。 这 样 ，Retina 显示 屏 就 可 以 显示 这 些 额 外 的 像素 ， 让 图 像 看 起 来 更 锐利 。 如 
果 使 用 40x30 的 图 像 ，Retina 显示 屏 就 会 拉 伸 这 些 像 素 以 填充 其 对 应 的 空间 ， 寻 和 致 锐利 程度 
降低 。 每 个 图 像 的 情况 都 不 一 样 。 

代码 编写 人 员 和 设计 师 通常 不 会 让 每 个 图 像 的 分 辨 率 都 扩大 为 原先 的 两 倍 ， 有 具体 做 法 取决 
于 开发 人 员 自 己 。 如 果 图 像 特 别 重要 ( 如 摄影 师 的 作品 集 网 站 ) ， 强 烈 推荐 这 种 做 法 。 这 样 图 
像 的 大 小 可 能 会 变 大 (要 了 解 如 何 避 免 这 种 情况 ， 参 见 第 二 条 提示 ) ， 而 且 双 倍 分 辨 率 的 图 像 
会 消耗 设备 更 多 的 内 存 (这 主要 是 移动 设备 的 问题 ) 。 建 议 至 少 在 一 个 移动 设备 上 做 好 测试 。 

@ 图 标 字 体 与 SVG 


图 标 字体 与 SVG 在 缩放 时 都 不 会 导致 失真 。 对 于 单 色 的 图 标 ， 建 议 尽 可 能 地 使 用 图 标 字 
体 ， 而 非 使 用 图 像 (参见 13.2 节 ) 。 对 标识 和 其 他 非 照片 类 图 像 ， 可 以 考虑 使 用 SVG ( 关于 


SVG 的 说 明 ， 参 见 5.1 节 的 补充 材料 ) 。 


5.9 在 图 像 编辑 器 中 改变 图 像 的 
尺 十 


大 多 数 图 像 对 网 页 来 说 都 太 大 了 。 一 幅 
用 于 打印 的 图 像 可 能 有 1800 像素 宽 (以 300 
dpi 打印 ， 有 6 英寸 宽 , 约 15 厘米 ) ， 而 用 
于 网 页 的 图 像 很 少 需要 超过 600 像素 ， 通 党 
还 要 小 得 多 。 

使 用 图 像 编 辑 器 既 可 放大 图 像 ， 也 可 缩 
小 图 像 。 但 是 图 像 放 大 后 质量 通常 会 变 差 ， 
看 起 来 非常 明显 。 此 外 ， 放 大 图 像 还 会 增加 
图 像 文 件 的 大 小 ， 导 致 页 面 加 载 时 间 变 长 。 


用 Photoshop 改变 图 像 尺 寸 

(1) 在 Save for Web 窗口 右 下 角 的 Imasge 
Size 部 分 , 点 击 W( 宽 度 ) 框 或 瑞 ( 高度 ) 框 ， 
如 图 5.9.1 所 示 。 

(2) 以 像 系 为 单位 输入 宽度 或 高 度 ， 或 输 
和 百分数, 再 按 一 下 Tab 键 , 改变 图 像 的 尺寸 ， 
如 图 5.9.2 所 示 。 

(3) 可 以 继续 调 大 或 调 小 ， 耳 到 满意 为 止 。 
在 按 下 Save 之 前 ， 图 像 不 会 重新 取样 。 





























原始 图 像 是 用 笔者 的 数码 相机 在 上 默认 设 


5.9.1 
置 下 拍摄 的 ， 其 尺寸 为 2816 像素 x 2112 像素 ， 对 
于 篆 见 的 网 页 来 说 太 大 了 ， 将 图 像 压 缩 为 高 质量 
JPEG 后 仍然 有 1.177MB 。 要 是 你 在 自己 的 网 站 上 
使 用 这 样 一 张 图 像 ， 肯 定 会 让 你 的 访问 者 惟 铠 避 之 
不 及 


在 进入 Save for Web 之 前 ， 也 可 以 通 
过 Image (图 像 ) 菜单 下 的 Image Size ( 图 像 
大 小 ) 命令 改变 图 像 的 尺寸 ， 参 见 图 5.7.3 和 
图 5.7.4。 
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Image Size 


woq | px J]e 
px 


Percent: 114.2 b | 


H: 300 





Quality: | Bicubic 





5.9.2 在 W 字段 中 输入 新 的 宽度 (这 里 是 400 
像素 ) ，H 字段 中 的 高 度 值 会 按照 原始 比例 做 相应 
改变 。 缩 小 后 的 图 像 (下 图 ) 在 页 面 中 很 合适 ， 通 
过 改变 压缩 设置 ， 文 件 大 小 降 到 了 37.75K 








减 小 图 像 尺寸 的 另 一 个 好 办 法 是 将 图 
像 上 不 需要 的 区 域 裁剪 掉 。 


5.10 ”为 网 站 添加 图 标 


我 们 在 浏览 各 选项 卡 (参见 图 5.10.1 ) 、 
历史 记录 、 书 签 页 、 收 藏 夹 和 地 址 栏 中 看 到 
的 (与 网 站 相关 ) 的 小 图 标 称 为 favicon， 这 
个 词 是 favorites icon【( 收藏 夹 图标 ) 的 简称 。 
我 们 创建 的 图 标 至 少 应 该 为 16x 16 (所 有 图 
标 大 小 单位 均 为 像 系 ) ， 不 过 ， 无 论 如 何 ， 
浏览 需 都 会 尝试 尽力 加 载 。 


Farm Training Podcasts 


Farm Training Podcasts 





5.10.1 相 较 于 浏览 锅 的 其 他 位 置 ，favicon 更 
多 地 显示 在 标签 页 上 (如 本 图 所 示 ) 。Internet 
Explorer 是 唯一 将 它 显示 在 地 址 栏 上 URL 之 前 的 
浏览 需 。 由 于 浏览 融通 稼 将 该 图 标 显 示 在 灰色 或 其 
他 颜色 的 背景 上 ， 因 此 有 必要 将 图 标的 背景 设 为 透 
明 的 (如 图 5.10.2 所 示 ) 
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此 外 ， 还 可 以 创建 一 个 或 多 个 触 屏 图 
标 ， 即 在 侠 果 设备 及 其 他 触 屏 设备 上 将 网 站 
添加 到 主屏 幕 上 时 要 显示 的 图 标 。 苹果 规 定 ， 
iPhone 和 iPod touch 的 图 标 大 小 为 57x57 或 
114x114 (对 于 Retina 显示 屏 ) ，iPad 的 图 
标 大 小 为 72x72 或 144x144 (对 于 Retina 显 
示 屏 ) 。Android 操作 系统 也 文 持 这 些 网 标 。 


为 网 站 添加 图 标 

(1) 创建 一 个 16x 16 的 图 像 ， 并 保存 为 
ICO 格式 ， 文 件 名 为 favicon.ico， 如 图 5.10.2 
所 示 。 作 为 可 选 步 又 ， 为 Retina 显示 屏 创 建 
一 个 32 x 32 的 图 像 。ICO 文件 允许 在 同一 个 
文件 中 包含 多 个 不 同 尺 寸 的 同名 文件 。 

(2) (推荐 ) 为 触 屏 设备 至 少 创建 一 个 图 
像 (如 图 5.10.3 所 示 ) ， 并 保存 为 PNG 格式 。 
如 果 只 创建 了 一 个 ， 将 其 命名 为 apple-touch- 
icon.png。 如 有 需要 ， 还 可 以 创建 其 他 的 触 屏 
图 标 。 

(3) 将 图 标 图 像 放 在 网 站 的 根 目 录 里 。 浏 
览 硕 会 目 动 在 根 目 录 寻 找 这 些 特 定 的 文件 名 ， 
找到 后 就 将 图 标 显 示 出 来 。 











5.10.2 ”在 现实 环境 中 ，favicon 比 这 里 显示 的 
要 小 ， 它 们 只 有 16 像素 x 16 像素 


FT Podcast 





5.10.3 将 网 站 从 Safari 添加 到 iOS 设备 的 主屏 
幕 上 会 用 到 apple-touch-icon 
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有 很 多 ICO 格 式 图 像 编 辑 器， 如 
X-Icon Editor ( http://xiconeditor.com ) 。 此 外 ， 
还 有 一 些 Photoshop 插件 (可 以 在 网 上 搜索 ) 。 


也 可 以 将 图 标 文件 放 在 根 目 录 以 外 
的 其 他 文件 夹 ， 不 过 这 样 的 话 ， 就 需要 在 
HTML 中 添加 1link 元 素 ， 从 而 让 浏览 器 得 以 
找到 这 些 图 标 (参见 补充 材料 ) 。 


HTMLS Boilerplate (hSbp.com ) 里 提 


供 了 各 种 尺寸 的 触 记 图 标的 示例 。 


关于 favicon 的 更 多 信息 

关于 创建 favicon 的 更 多 人 信息， 参见 
www.netmagazine.com/features/create-perfect- 
favicon (Tm J 2 
时 了 ) 。 此 外 ，Thomas Fuchs 有 一 篇 关于 
favicon 的 文章 ， 见 http://davidwalsh.name/ 


retna-favlicons 。 
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口 创建 指 疝 为 一 个 网 页 的 链接 
口 创建 锚 并 链接 到 特定 的 销 
口 创建 其 他 类 型 的 链接 


链接 是 万 维 网 的 命脉 。 没 有 它们 ， 每 个 
页 面 都 只 能 独立 存在 ， 同 其 他 所 有 页 面 完 全 
ae 

链接 有 两 个 主要 的 部 分 : 目标 和 标签 。 
使 用 目标 ( destination ) 可 以 指定 访问 者 点 击 
链接 时 会 发 生 什 么 。 可 以 创建 链接 进入 另 一 
个 页 面 , 在 页 面 内 跳 转 , 显示 图 像 , 下 载 文件 ， 
呼叫 电话 ， 等 等 。 不 过 ， 最 常见 的 是 连接 到 
其 他 网 页 的 链接 ， 其 次 是 连接 到 其 他 网 页 特 
定位 置 ( 称 为 锚 ，anchor ) 的 链接 。 目 标 是 通 
过 编写 URL 定义 的 ,通常 只 能 在 (桌面) 浏 
筑 融 的 状态 栏 中 看 到 。 

链接 的 第 二 个 部 分 是 标签 (label ) ， 即 
访问 者 在 浏览 厚 中 看 到 或 在 屏幕 阅读 需 中 听 
到 的 部 分 。 激 活 标 签 就 可 以 到 达 链 接 的 目标 。 
例如 ， 航 空 公 司 网 站 上 可 能 有 这 样 的 链接 标 
签 : 预订 航班 。 标 签 可 以 是 文本 、 图 像 或 二 
者 兼 有 。 浏 览 硕 通 第 会 将 标签 文本 默认 显示 
为 市 下 划 线 的 赣 色 文字 。 通 过 CSS 可 以 很 容 
多 地 改变 这 一 样式 。 





6.1 创建 指 癌 另 一 个 网 页 的 链接 


a 元 系 是 创建 链接 的 关键 ， 如 图 6.1.1 所 
示 。 如 果 你 有 多 个 网 页 ， 那 么 很 可 能 和 希望 创 
建 从 一 个 页 面 到 另 一 个 页 面 ( 以 及 返回 ) 
的 链接 (参见 图 6.1.2 ~ 图 6.1.4) 。 还 可 以 
链接 到 其 他 网 站 的 页 面 ， 可 能 是 你 上 自己 制作 
的 ， 也 可 能 是 他 人 创建 的 (参见 图 6.1.5 ~ 
图 6.1.8 ) 。 


1. 创建 指向 另 一 个 网 页 的 链接 

(1) 输入 <a href="page.htm1">， 其 中 
page.html 是 目标 网 页 的 URL, 如 图 6.1.1 所 示 。 

(2) 输入 标签 文本 ， 也 就 是 默认 突出 显示 
的 文本 ， 如 图 6.1.3 所 示 ， 访 问 痢 激活 它 时 ， 
就 会 转 到 第 (1) 步 中 所 指 问 的 页 面 。 也 可 以 添 
加 一 个 img 元 素 将 代 文 本 (或 同文 本 一 起 ) 
作为 标签 。 (参见 6.3 节 及 补充 材料 “将 缩 略 
图 链接 到 图 像 ”。 ) 

(3) 输入 </a> 结束 链接 定义 。 























a 


<a href="cats.html">Cookie and Woody</a> 


链接 地 址 链接 标签 





6.1.1 每 个 链接 都 有 一 个 日 标 URL 地 址 (由 href 
属性 指定 ) 和 一 个 标签 。 这 个 例子 中 的 标签 是 文本 ， 
不 过 标签 也 可 能 是 图 像 或 者 文本 和 图 像 的 组 合 
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<body> 


<h1i>Cookie and Woody</h1> 
<img src="img/cookie.jpg" width="143" height="131" alt="Cookie" /> 


<img src="img/woody.jpg" width="202" height= 131 alt="Woody” /> 
<p>Generally considered the sweetest and yet most independent cats in the <a href="pioneer-valley. 
html">Pioneer Valley</a>, Cookie and Woody are consistently underestimated by their humble 


humans.</p> 


</body> 
</htm]> 











6.1.2 ”由 于 在 href 属性 中 只 有 文件 名 ( 没有 路径 ) ， 文 件 pioneer-valley.html 必须 与 包含 这 个 链接 的 网 
页 位 于 同一 个 目录 。 和 否则 ， 当 用 户 激活 该 链接 时 ， 浏 览 融 将 找 不 到 pioneer-valley.html 





eonkioAnemerwebpa | 即便 没有 它 链接 也 能 照常 工作 。 但 对 于 指 
1 cn ainc anotier web LEE | 向 另 一 网 站 的 链接 ， 推荐 包含 这 个 值 。 它 描 
述 包 含 链 接 的 页 面 和 链接 指 癌 的 页 面 之 则 的 
关系 。 它 也 是 为 一 种 提升 HTML 语义 化 程度 
的 方式 。 搜 索引 擎 也 会 利用 这 些 信 息 。 此 外 ， 
还 可 以 对 市 有 rel="external" 的 链接 添加 不 
同 的 样式 ， 从 而 告知 访问 者 这 是 一 个 指 回 外 
部 网 站 的 链接 。 (参见 9.8 市 。) 





怖 上 全 全 The Pioneer Valley 


The Pioneer Valley 


Generally considered the sweetest and vet most 


independent cats in the ee Cookie and Woody 


are consistently underestimated by their humble humans. 


The Pioneer Valley 


Wy fictitious—site.com pioneer-—valley.htrl 





Located in Northwestern Massachusetts, the Pioneer Valley 
6.1.3 当 访 问 者 指 向 链接 , 在 数 ; 浏览 HI 吕 避 器 中 ， is home to five colleges, including Amherst, Hampshire, 

a Smith, Niount Holyoke, and the U ty of Massachusetts. 
目标 URL 会 显示 在 状态 栏 中 。 (图 6.1.2 中 的 示例 。。 | 守 20EO 
假设 两 个 网 页 都 位 于 www.fictitious-site.com ) 如 果 
用 户 激活 该 链接 …… 

可 以 创建 指 癌 为 一 个 网 站 的 页 面 的 链 
接 ， 例 如 : <a href="http://www.site.com/ 
directory/page.html" rel="external">Label 


text</a> (参见 图 6.1.5 ~ 图 6.1.8 ) 。 将 href 2 与 这 个 目标 URL 相关 联 的 页 面 就 会 
的 值 蔡 换 为 目标 URL 地 址 ,rel 属 性 是 可 选 的 ， ”显示 在 用 户 的 浏览 带 中 
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通过 键盘 进行 导航 

可 以 通过 键盘 对 网 页 进行 导航 。 实 际 上 ， 有 的 人 由 于 有 一 些 肢体 障碍 ， 无 法 使 用 鼠标 这 
样 的 设备 ， 因 此 不 得 不 通过 键盘 对 页 面 进 行 导 航 。 

每 按 一 次 Tab 键 ， 焦 点 就 会 转移 到 HIML 代码 中 出 现 的 下 一 个 链接 、 表 单 控件 或 图 像 映 
射 ( 每 按 一 次 Shiftr+Tab ， 焦 点 就 会 向 前 转移 ) 。 这 个 顺序 不 一 定 与 屏幕 上 出 现 的 顺序 一 致 ， 
因为 页 面 的 CSS 布局 可 能 不 同 。 通 过 使 用 HTML 的 tabindex 属性 ,可 以 改变 使 用 Tab 键 的 顺序 ， 
但 不 建议 使 用 ， 因 为 在 大 多 数 情况 下 没 必要 这 么 做 ， 而 且 这 种 方法 已 经 过 时 了 。 这 种 方法 可 
能 导致 屏幕 阅读 器 用 户 迷 失 方 向 。 (14.9 节 演 示 了 tabindex 的 一 个 有 帮助 的 用 法 。 ) 

对 内 容 添加 标记 的 时 候 ， 应 注意 保证 转移 焦点 的 顺序 是 符合 逻辑 的 。 应 对 自己 的 页 面 
使 用 Tab 键 进行 测试 ， 就 像 用 户 的 操作 一 样 ， 再 对 HTML 作 相 应 的 调整 。 ( 注意 ， 如 果 你 
使 用 的 是 Mac， 这 一 功能 可 能 被 禁用 了 。 如 果 要 开启 这 一 功能 ， 可 以 在 网 上 搜索 “Enabling 
keyboard navigation in OS X browsers” (在 OSX 浏 览 器 中 激活 键盘 导航 ) 。 


SAQ Creating a Link to Another Site 
Ga Creatinga Link to Another Site 





ee 
The Glory of Cats 


<hi>The Glory of Cats</h1> 


Cats are wonderful companions. Whether it's a bottle cap, long string, 
Or YAnr leos thev always find something to chase around. 

Cat entry on Wikipedia 
In fact, cats are SO great they even have their own musical. It was 
inspired by T.S. Eliot's Old Possum's Book of Practical Cats. 


<p><a href="http://en.wikipedia.org/wiki/ 
Cat”" rel="external”" title="Cat entry 
on Wikipedia">Cats</a> are wonderful 


companions. Whether it's a bottle cap, en.wikipedia.org/wiki/Cat 








‘long string, or your legs, they always SE 二 wy Et 

find something to chase around.</p> 6.1.6 同 指 站 关门 页 面 的 链接 一 桂 ， 访问 着 将 

忌 标 移 到 指 癌 其 他 网 站 的 链接 上 时 ， 目 标 URL 会 

<p>In fact, cats are so great they even have 出 现在 状态 栏 里 ，title 文字 ( 如果 指定 了 的 话 ) 
<a href="http://www.catsthemusical.com" 也 会 显示 在 链接 旁边 。 当 访问 者 点 击 链接 时 ……… 


rel="external" title="O0fficial site of 
Andrew Lloyd Webber's musical >their own 
musical</a>. It was inspired by T.S. Eliot's 
<Cite>01d Possum's Book of Practical Cats 
</cite>.</p> 


ricis Ta Piyad ‘Vig Hise 


(Cat 


WIPEDIA rem rr 


</body> 
</htm]> 


放量 区 ab fe caf sres hn i corer hp ds pa. Firwr da 三 
i rd, ey Fy Fiow wife US My Co FEE Tin) Wd IJ 
Ie) 

Th Gomoriie ct "| Fab 





cal or Foally aifapsiria 


6.1.5 ”如 果 要 创建 的 链接 是 指 癌 其 他 网 站 的 ， ee wad wenpi 
应 使 用 绝对 URL。 绝 对 URL 由 http:/、 主 机 及 | 
完整 路 径 ( 如 果 需 要 的 话 ) 组 成 。 同 rel 一 样 ， a mee 


title 属性 也 是 可 选 的 (关于 cite 元 素 的 用 法 ， 参 aa ne cam wa whod toy 
见 第 4 章 ) 二 








< 目标 URL 指示 的 页 面 会 显示 在 访问 
者 的 浏览 硕 中 
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2. HTML 块 级 链接 

目前 ， 你 已 看 过 一 些 将 某 一 元 素 内 的 
一 小 部 分 文本 作为 链接 的 例子 。 实 际 上 ， 
HTMLS 几乎 允许 在 链接 内 包含 任何 类 型 的 元 
素 或 元 素 组 , 参见 图 6.1.8。 例 如 段落 、 列 表 、 
整 篇 文章 和 区 块 一 一 几乎 任何 元 素 都 行 ( 但 
其 他 链接 、 音 频 、 视 频 、 表 单元 兹 、iframe 
等 交互 式 内 容 除外 ) ， 这 些 元 素 大 部 分 为 块 
级 元 素 。 使 用 HTML 验证 圳 对 页 面 进行 测试 
(参见 20.5 市 ) 可 以 防止 链接 中 出 现 不 允许 
(i 














<a href="giraffe-escapes.htm]l"> 
<p>A giraffe escaped from the zoo today, 
and animals rejoiced worldwide.</p> 


<p>Read more</p> 
</a> 





图 6.1.8 慌 人 大 家 都 访问 过 这 样 的 网 站 ， 以 文章 
的 一 小 段 内 容 为 链接 ， 指 癌 完 整 的 文章 。 如 果 想 让 
这 一 小 段 内 容 和 提示 ( 如 “阅读 全 文 ”) 都 形成 指 
问 完 整 文章 页 面 的 链接 ， 就 应 使 用 块 级 链接 。 可 以 
通过 CSS 让 部 分 文字 显示 下 划 线 ， 或 者 所 有 的 文 
字 都 不 会 显示 下 划 线 








这 些 块 级 链接 (block-level link) 是 
HTML5 同 HTML 早期 版 本 有 巨大 差异 的 地 
方 。 在 以 前 的 HIML 中 ,链接 中 只 能 包含 图 
像 、 文 本 短语 ， 以 及 标记 文本 短语 的 元 系 (如 
em、strong、cite 等 ) 。 

有 趣 的 是 ， 尽 管 在 以 前 的 HIML 规范 
中 块 级 链接 是 不 允许 的 ， 但 浏览 需 都 文 持 。 
这 意味 看 你 现在 就 可 以 使 用 它们 ， 而 且 它 
们 在 旧 的 浏览 硕 和 现代 浏览 硕 中 均 能 正 稼 工 
作 。 不 过 ,使 用 它们 的 时 候 也 要 小 心 (参见 
图 6.1.8 和 图 6.1.9 ) 。 

有 一 些 可 访问 性 方面 的 注意 事项 ， 特 别 
是 涉及 不 同 的 屏幕 阅 谈 融 如 何 处 理 块 级 链接 














的 问题 。 无 障碍 访问 专家 Derek Featherstone 
和 Steve Faulkner 的 文章 深入 探讨 了 这 个 问题 ， 
参 见 http://simplyaccessible.com/article/html5- 





block-links/ 和 www.paciellogroup.com/blog/ 
2011/06/htmlS-accessibllitychops-block-links/。 
他 们 建议 将 最 相关 的 内 容 放 在 链接 的 开头 ， 
而 且 不 要 在 一 个 链接 中 放 人 过 多 内 容 。 
Featherstone 指出 ， 随 看 屏幕 阅 谈 硕 和 训 览 大 
逐渐 开始 官方 文 持 块 级 链接 ， 可 访问 性 问题 
可 能 只 是 暂时 的 。 








<body> 
<a href="pioneer-valley.htm]l"> 
<h1i>Cookie and Woody</h1> 
<img src="img/cookiefora.jpg” width= 
"143" height="131" alt="Cookie" /> 


<img src="img/woodygran.jpg” width="202" 
height="131" alt="Woody” /> 


<p>Generally considered the sweetest 
and yet most independent cats in the 
Pioneer Valley, Cookie and Woody are 
consistently underestimated by their 
humble humans.</p> 
</a> 


</body> 
</htm]> 





图 6.1.9 不 要 过 度 使 用 块 级 链接 。 应 该 避免 这 里 
演示 的 情况 一 一 将 一 大 有 段 内 容 使 用 一 个 链接 包 起 
来 。 尺 管 这 样 的 链接 是 有 效 的 HTML5， 但 屏 项 阅 
读 带 有 可 能 将 所 有 这 些 内 容 多 明 读 一 次 ， 多 读 的 这 
些 内 容 可 能 比 访问 者 本 希望 听 到 的 链接 信息 要 多 得 
多 。 因 此 ， 最 好 仅 将 与 链接 的 含义 密切 相关 的 内 容 
放 在 链接 里 


一 般 来 说 ， 用 的 最 多 的 还 是 第 一 个 例子 
(参见 图 6.1.1 ) 那样 简单 、 传 统 的 链接 样式 ， 
不 过 也 要 知道 ,也 用 得 上 制作 精巧 的 块 级 链接 。 
可 以 改变 标签 文本 的 默认 样式 (参见 第 
10 章 ), 其 至 可 以 用 图 像 作为 标签 (参见 6.5 节 )。 
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href 指 hypertext reference ( 超 文本 引 
用 ) 。 通 常 ， 对 指向 站 内 网 页 的 链接 使 用 相 
对 URL， 对 指向 其 他 网 站 页 面 的 链接 使 用 绝 
对 URL。 更 多 信息 参见 1.7 节 。 


仅 指 定 路 径 ， 省 略 文 件 名 ， 就 可 以 创 
建 指 向 对 应 目录 下 默认 文件 (通常 为 index. 
html ) 的 链接 : Www.site.com/directory/。 如 果 
连 路 径 也 省 略 ， 就 指向 网 站 的 默认 ( 首 ) 页 : 


WwWW.Slte.com 。 


在 URL 中 应 该 全 部 使 用 小 写字 母 ， 
除非 指向 的 页 面 或 目录 名 称 中 含有 大 写字 母 。 
对 于 你 自己 的 网 站 ， 应 使 用 小 写字 母 命 名 所 
有 的 文件 夹 和 文件 ， 并 与 链接 URL 对 应 ， 相 
关内 容 参 见 1.6 节 。 


不 要 让 链接 的 标签 太 长 。 如 果 链 接 是 
句子 的 一 部 分 ， 应 在 链接 的 标签 定义 中 仅 保 
留 关 键 字 。 


不 管 怎样 ， 应 避免 使 用 “点 击 此 处 ” 
作为 标签 。 这 种 类 型 的 链接 文本 在 万 维 网 上 实 


在 是 太 常见 了 ， 它 会 破坏 网 站 的 可 用 性 和 可 访 
问 性 ， 从 而 对 网 站 的 拥有 者 产生 不 利 的 影响 。 
当 用 户 快速 打 过 页 面 上 的 链接 (无论 是 通过 屏 
幕 还 是 通过 屏幕 阅读 器 ) 时 ， 会 发 现 “点 击 此 
处 ”缺乏 上 下 文 (“点 击 此 处 ? 为 什么 ? ”)， 
它 对 激活 链接 几乎 不 会 产生 激励 ， 而 且 依赖 于 
访问 者 阅读 链接 周转 的 文字 ， 并 和 寄 硕 望 于 这 些 
文字 可 以 解释 链接 的 目的 。 不 难 理解 ， 访 问 者 
通常 更 倾向 于 跳 过 这 样 的 链接 。 此 外 ， 正 如 本 
章 开 头 提 到 的 ，“ 点 击 ”一 词 并 不 适用 于 用 户 
触发 链接 的 所 有 方式 。 相 反 ， 应 该 使 用 文本 中 
已 经 存在 的 关键 字 对 链接 进行 标识 。 例 如 ， 应 
使 用 “了 解 我 们 的 销售 情况 ”， 而 不 是 “点 去 
此 处 了 解 我 们 的 销售 情况 ”。 
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人 四。 如果 你 想 为 块 级 链接 添加 背景 、 边 杠 、 
外 边 距 、 内 边 距 等 样式 ,需要 在 样式 表 中 为 
链接 设置 display: block (诚然 ， 这些 内 容 
有 些 超前 了 ) 。 关 于 CSS 中 的 display 属性 ， 
参见 11.6 节 。 


尽管 这 里 不 会 讲解 图 像 映 射 的 用 法 ， 
但 你 应 知道 它们 是 用 来 为 单 张 图 像 的 一 个 或 
多 个 区 域 添 加 链接 的 ,可 以 在 网 上 搜索 “HTML 
image maps” ( HTML 图 像 映 射 ) 了 解 有 关 图 
像 映射 的 更 多 信息 。 


维基 百科 上 有 一 份 rel 值 的 列表 
( http://microformats.org/wiki/existing-rel- 


values ) ， 该 列表 还 在 持续 更 新 中 。 


一 定 要 在 网 站 的 每 个 页 面包 含 指向 网 
站 各 主要 板块 (包括 首页 ) 的 导航 。 这 可 以 
让 访问 者 自由 地 浏览 网 站 ， 不管 他 们 是 直接 
访问 网 站 还 是 通过 其 他 网 站 的 链接 访问 。 你 
无 法 知道 访问 者 会 从 哪里 进入 你 的 网 站 ， 可 
能 是 通过 指向 网 站 内 页 的 “深度 ”链接 ， 因 
此 你 应 该 让 他 们 可 以 从 那里 开始 访问 网 站 的 
其 余部 分 。 
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如 何 使 用 target 属性 ， 


以 及 为 何不 要 在 大 多 数 情 况 下 使 用 该 属性 


可 以 将 链接 设置 为 在 新 的 窗口 或 标签 页 ( 取决 于 所 用 的 浏览 器 ) 中 打开 ， 但 我 们 将 其 看 
做 一 种 不 好 的 实践 ， 不 推荐 使 用 。 这 样 说 是 有 理由 的 。 


首先 ， 应 该 让 用 户 决定 
天 否则 ， 


窗口 看 到 2 RS 
同年 龄 段 的 人 展示 标签 


惑 O 使 用 浏 | 


是 否 在 不 同 的 窗口 或 标签 
我 们 就 支配 了 用 户 的 浏览 行为 。 
也 有 一 些 可 用 性 和 可 访问 性 方面 的 考虑 。 es 


， 他 们 之 前 并 不 知道 可 以 同时 打开 多 


签 页 打开 链接 ， 而 不 是 让 HIML 开发 人 员 


活 一 个 链接 却 没 有 在 当前 
器 并 非 对 所 有 人 都 是 一 件 容易 的 事 。 我 曾 向 不 
个 页 面 。 类 似 地 ， 屏 幕 阅读 器 


等 辅助 设备 的 用 A ， 力 去 寻找 新 的 禄 口 或 标签 页 ， 前 提 还 是 他 们 明确 知道 是 哪 


个 窗口 或 标签 页 加 载 了 新 的 内 容 。 


如 果 所 有 这 些 并 未 说 服 你 避免 将 链接 设置 为 在 新 窗口 和 标签 页 打开 ,或 者 你 的 2 
或 客户 不 赞同 你 不 使 用 它们 的 理由 ， 可 以 看 看 如 何 创 建 这 种 链接 : 在 链接 定义 中 输 


target="window" 
例 如， 


的 新 窗口 或 标签 页 中 打开 some-page.html。 


如 果 让 多 个 链接 指向 同一 个 窗口 ( 即使 用 同一 个 名 称 ) ， 


， 其 中 window 是 应 该 显示 相应 页 面 的 窗口 的 名 称 ( 由 你 自己 选择 ) 。 
<a 人 some-page.htm1l” target="doodad">Some page</a> 会 在 名 为 doodad 


链接 将 都 在 同一 个 窗口 打开 。 


或 者 ， 如 果 你 布 望 链接 总 是 在 不 同 的 窗口 或 标签 页 打开 ( 即使 多 次 激活 同一 个 链接 ) ， 就 使 


用 HTML 预定 义 的 名 称 blank ( target=" 


target 还 有 一 种 用 法 ， 
博 况 下 ( 不 过 它们 偶尔 会 有 用 武之 地 ) 。 
mozilla.org/en/HTML/Element/iframe. 


6.2 创建 锁 并 链接 到 销 


通 第 ， 激 活 一 个 链接 会 将 用 户 各 到 对 应 
网 页 的 顶端 。 如 果 要 想 用 户 跳 至 网 页 的 特定 
区 域 , 可 以 创建 一 个 锚 , 并 在 链接 中 引用 该 销 ， 
参见 图 6.2.1、 图 6.2.2 和 图 6.2.3。FAQ 页 面 
可 能 是 最 第 使 用 销 链 接 的 页 面 。 


1. 创建 锚 的 步骤 

(1) 将 光标 放 在 硕 望 用 户 跳 转 至 的 元 又 的 
开始 标签 里 。 

(2) 输入 id="anchor-name"， 其 中 anchor- 








blank" ) 。 
不 过 我 还 是 不 推荐 你 这 样 做 ， 能 免 则 免 。 

就 是 在 iframe 中 打开 链接 。 可 以 用 同样 的 方法 编写 target， 只 
是 其 值 应 与 iframe 的 id 对 应 。 你 很 少 有 机 会 用 到 这 


个 ， 特 别 是 在 通常 不 推荐 使 用 iframe 的 


关于 iframe 元 素 的 更 多 人 信息， 参见 https://developer. 


name 是 在 内 部 用 来 标识 网 页 中 这 部 分 内 容 的 
文字 。 一 定 要 在 元 系 名 称 和 id 之 间 保 留 一 个 
空格 ， 例 如 《<h2 id="features">。 


2. 创建 链接 到 特定 锁 的 链接 

(1) 输入 <a href=" 加 nchor-name">， 其 中 
anchor-name 是 目标 的 id 属性 值 (参见 “创建 
锁 的 步骤 ”中 的 第 (2) 步 ， 例 如 *《a href= 
"#features">, 

(2) 输入 标签 文本 , 即 突出 显示 的 文本 ( 通 
第 默认 显示 为 种 下 划 线 的 蓝 色 文字 ) ， 也 即 
用 户 激活 它 时 将 用 户 市 到 第 (1) 步 中 引用 的 区 
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域 的 文本 。 跟 通 当 一样 ， 也 可 以 将 图 像 用 做 标签 。 
(3) 输入 </a> 结束 对 链接 的 定义 。 


<body> 


<article> 
<header> 
<h1>Frequent]ly Asked Questions (FAQ)</h1> 


<nav> 
<Ul> 
《Li><a href="#question-01">Can an id have more than word?/a></1i> 
《Li><a href="#question-02">Can visitors bookmark anchor links?/a></1i> 
《Li><a href="#question-03">My anchor link isn't working. What am I doing wrong?*/a></1i> 


</U]> 
</navy> 
</header> 


<h2 id="question-01">Can an id have more than word?/h2> 
<p>Yes, your ids can have more than one word as long as there are no spaces. Separate each word 
with a dash instead.</p> 


<h2 id="question-02">Can visitors bookmark anchor links?</h2> 

<p>Yes, they can! And when they visit that link, the browser will jump down to the anchor as 
expected. Visitors can share the link with others, too, so all the more reason to choose 
meaningful anchor names.</p> 


<h2 id="question-03">My anchor link isn't working. What am I doing wrong?/h2> 

<p>The problem could be a few things. First, double-check that you added an id (without "#") to 
the element your link should point to. Also, be sure that the anchor in your link <em>is</em> 
preceded by # and that 让 matches the anchor id.</p> 


</articley> 


</body> 
</html> 





6.2.1 每 个 以 # 开 头 的 链接 href 值 都 指向 拥有 相应 id (不 含 #) 的 元 素 。 例如，<a href="#question- 
03">...</a> 指 癌 《h2 id="question-03">...</h2>。 可 以 为 任何 元 素 指 定 id， 只 要 任何 给 定 的 id 在 一 个 
页 面 中 只 存在 一 次 (参见 3.14 市 ) 。 这 个 例子 还 让 你 提前 看 到 了 无 序列 表 (ul ) 的 应 用 。 无 序列 表 是 目前 
万 维 网 上 使 用 频率 最 高 的 列表 类 型 ( 第 15 章 将 深入 讨论 列表 ) 

















为 每 一 个 锚 id 赋 一 个 有 意义 的 名 称 如 果 锚 位 于 另 一 个 文档 ， 就 使 用 <a 
可 以 增强 HTML 文档 的 语义 丰富 度 。 换 和 句 话 href ="page.html#anchor-name"> 引 用 该 
说 ， 避 免 使 用 像 anchor3 这 样 的 id。 区 域 。 (在 URL 和 # 之 间 没 有 空格 。) 如 
5 野 锚 位 于 另 一 台 服务 器 上 的 页 面 ， 则 需 输 入 
<a_href="http://www.site.com/directory/ 
page.html#anchor-name"> ( 没有 空格 ) 。 
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如 果 锚 位 于 页 面 的 底部 ， 且 它 下 面 的 
内 容 的 高 度 小 于 浏览 器 的 可 视 区 域 的 高 度 ， 
那么 它 可 能 不 会 显示 在 窗口 的 项 部， 而 是 显 


示 在 中 间 。 


@ae 
By) Creating and Linking to Anchors 


Creating and Linking to Anchors 





Frequently Asked Questions (FAQ) 


es Can an id have more than one word? 
es Can visitors bookmark anchor links? 


ea My anchor link isn't Worktng. What am I doing wrong? 


se。 How do I link to a specific part of someone else's webpage? 
Can an id have more than one word? 


Yes, your ids can have more than one word as long as there are no 
spaces. Separate each word with a dash instead. 


Can visitors hookmark anchor links? 
www,allaboutlinks.info/anchor-links.html#auestion-03 
图 6.2.2 ”在 茧 面 浏 览 需 中 ， 当 访问 者 将 鼠标 指 加 
引用 锚 的 链接 时 ，URL 和 销 名 称 会 显示 在 状态 栏 
中 (在 窗口 的 左下 角 ) 














人 与 刁 
| : Creating and Linking to Anchors 


My anchor link isn't working. What am I 
doing wrong? 





Creating and Linking to Anchors 


The problem could be a few things. First, double-check that you 
added an id (without "#") to the element your link should point to. 
Also, be sure that the anchor in your link is preceded by "#" and 
that 让 matches the anchor id. 


How do I link to a specific part of 
someone else's webpage? 


Although you obviously can't add anchors to other people's pages, 
you can take advantage of the ones that they have already created. 
View the source code of their webpage to See if they've included 


图 6.2.3” 当 访问 者 激活 该 链接 时 ， 锚 引用 的 页 面 
特定 部 分 就 会 显示 在 浏 览 器 窗口 的 顶部 。 这 个 页 面 
比较 搞笑 ， 它 链接 到 了 打 不 开销 链接 的 情况 下 应 该 
如 何 处 理 的 信息 








6.3 创建 其 他 类 型 的 链接 
并 非 只 能 创建 指向 其 他 网 页 的 链接 ， 其 


实 可 以 创建 指向 任何 URL 的 链接 一 一 RSS 源 、 
图 像 、 和 希望 访问 者 可 以 下 载 的 文件 、 电 子 邮 
件 地 址 、 电 话 号 码 等 (参见 图 6.3.1 ) 。 





<h1i>0ther Types of Links</h1> 


<p>There are lots of different kinds of 
links that you can create on a webpage. 
Following are some examples.</p> 


<h2>Images</h2> 

<p>You can link directly to <a href= 
"img/blueflax.jpg">a photo</a> or 
“even make links out of photos. For 
“example, the following image is linked 
to a flowers photo gallery page. 
<a href="gallery-flowers.htm]l" title= 
"More flower images"><img src="img/ 
‘blueflax.jpg" width="165" height="105" 
‘alt="Blue Flax” /></a></p> 


<h2>0ther Assets</h2> 

<p><a href="media/piano.mp3">Listen to 
tickling of the ivories</a> (MP3, 1.3 MB) 
‘or <a href="media/paddle-steamer.mp4"> 
Watch a paddle steamer</a> (MP4, 2.4 MB). 
These link directly to the files (handy for 
downloading).</p> 


<h2>Email Addresses</h2> 

<p>Send feedback to <a href="mailto: 
someone@somedomain.com">someone@ 
‘somedomain.com</a>.</p> 


<h2>Phone Numbers</h2> 

<p>Call now for free things! 
<a href="tel:+18001234567">1 
(800) 123-4567</a></p> 





图 6.3.1 可 以 创建 指向 各 种 类 型 URL 的 链接 。 这 
个 页 面包 含 六 个 链接 ， 但 有 的 浏览 器 可 能 无 法 显示 
包围 图 像 的 链接 ( 参见 图 6.3.2 ) 


创建 其 他 类 型 链接 的 步骤 
(1) 输入 <a href="。 
(2) 输入 URL。 
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对 于 指 回 万 维 网 上 任何 文件 ( 包括 图 像 、 
ZIP 文件 、 程 序 、PDF 及 其 他 等 ) 的 链接 ， 输 
入 http://www.site.com/dir/file.ext， 其 中 
www.site.com 是 主机 和 名称，dir/file.ext 是 
目标 文件 的 路 人 径 。 后 者 包括 了 文件 目录 和 文 
件 名 (以 及 扩展 名 ) 。 

对 于 电子 邮件 地 址 ， 输 入 mailto:name@ 
domain.com (不 以 http:W/ 开头) ， 其 中 name@ 
domain.com 是 电子 邮件 地 址 ( 不过， 应 避免 
链接 到 电子 邮件 地 址 ， 参 见 提示 ) 。 

对 于 电话 号 码 ， 输 入 tel:+ (不 以 http:// 
开头 ) 并 紧 跟 者 国家 代码 和 电话 号 码 ( 所 
有 的 号 人 码 中 都 不 必 人 包含 短 模 线 ) 。 号 人 码 的 
长 度 在 每 个 国家 都 不 一 样 。 例 如 ， 美 国 的 
国家 代 人 码 是 1， 因 此 美国 的 电话 号 人 码 形 如 
tel:+18889995555( 英国 的 国家 代码 为 44， 肯 
尼 亚 为 234， 依 次 类 推 ) 。 

(3) 输入 ">。 

(4) 输入 链接 的 标签 。 标 签 是 默认 以 下 
划 线 和 其 他 颜色 突出 显示 的 文本 ， 当 用 户 激 
活 它 时 ， 会 将 访问 者 带 到 第 (2) 步 中 引用 的 
URL。 也 可 以 添加 一 个 img 元 素 替 代 文 本 作 
为 标签 ( 参见 图 6.3.1 以 及 补充 材料 “将 缩 略 
图 链接 到 图 像 ”) 。 














(5) 输入 </a>。 
6 如 果 链 接 指 向 的 文件 是 浏览 器 不 知道 


如 何 处 理 的 类 型 (例如 Excel 文件 ) ， 浏 览 器 
将 试 着 打开 一 个 辅助 程序 来 查看 这 个 文件 ， 
或 试 着 将 它 下 载 到 访问 者 的 磁盘 上 。 


建议 不 要 使 用 指向 电子 邮件 地 址 的 链 
接 ， 因 为 垃圾 邮件 机 器 人 会 从 网 页 上 搜集 这 
些 地 址 并 向 其 发 送 垃圾 邮件 。 最 好 使 用 描述 
性 的 文字 表示 电子 邮件 地 址 ， 如 “someone at 
some domain” ， 不 过 这 样 做 也 并 非 万 无 一 失 。 


提 示 
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Creating Other Trpes of Links 
| Creating Other Types of Links 


Other Types of Links 


There are lots of different kinds of links that YOU Can 
create on a webpage. Following are some examples. 


Images 


You can link directly to a photo or even make links 
out of photos. For example, the following image is 
linked to a photo gallery page. 


外 到 
™ 
J 
本 | 
有 . :ho 
n 梧 


Other Assets 


Listen to tickling of the ivories (MP3, 1 .3 MB) or 
watch a paddle steamer (MP4, 2.4 MB). These link 
directly to the files (handy for downloading). 


Email Addresses 


Send feedback to someone@ omedomain.com. 


Phone Numbers 
Call now for free things! 1 (800) 123-4567 





图 6.3.2 ”无 论 链接 通 向 哪里 ， 它 们 在 浏览 器 中 的 
默认 样式 都 是 一 样 的 ， 除 非 其 中 包含 图 像 ( 有 的 浏 
览 器 在 图 像 链接 周围 添加 边框 ， 有 的 则 不 会 ) 。 注 
意 ， 我 尽量 创建 与 文本 主体 混在 一 起 的 标签 ， 而 不 
是 使 用 “点 击 此 处 ” (Click me ) 作为 标签 











在 理解 tel: 的 智能 手机 里 ， 如 果 点 
击 这 样 的 链接 ， 手 机 就 会 询问 用 户 是 否 需 要 
拨打 该 号 码 。 对 于 一 些 不 是 电话 的 设备 (如 
iPad ) ， 则 会 询问 用 户 是 否 需 要 将 该 号 码 添加 
到 通讯 录 里 。 此 外 ， 有 的 果 面 浏览 器 在 这 种 
情况 下 会 启动 Google Voice 或 Skype， 而 其 他 
的 浏览 器 则 不 知道 该 如 何 处 理 这 种 情况 。 
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尽管 可 以 链接 到 PDF 和 其 他 非 
HTML 文档 (Word、Excel 等 ) ， 但 应 尽量 
避免 这 样 做 。 相 反 ， 应 链接 到 包含 有 关 信 息 
的 HTML 页 面 。 PDF 可 能 要 花 更 长 的 时 间 
加 载 ， 而 且 有 的 浏览 器 在 尝试 显示 它们 的 时 
候 会 变 得 很 慢 。 如 果 PDF 是 唯一 的 选择 ， 要 
让 用 户 知道 链接 指向 的 是 PDF 而 不 是 另 一 个 
HTML 页 面 ， 以 免 他 们 感到 意外 (如果 让 用 
户 讲 入 耗 时 的 下 载 ， 他 们 是 不 会 领情 的 ) 。 
这 ee 他 非 HTML 文档 也 适用 。 显 
给 用 户 的 信息 可 以 是 简单 地 用 括号 包围 的 
a 
面 是 一 个 不 包含 图 标的 例子 : xa href="q2- 
sales-report.pdf">02 Sales Report (PDF ， 
725kb)</a>。 还 可 以 在 链接 中 包含 title 属 
性 (如 title="0pens a PDF")。 


8 对 供 访 问 者 下 载 的 大 文件 和 文件 组 进 
行 压缩 是 个 好 办 法 。 例 如， 一 套 保存 为 PSD 
文件 的 Photoshop 模板 。 在 网 上 搜索 “ZIP and 
RAR”， 查 找 创建 和 打开 使 用 这 些 流行 的 压 
缩 格式 的 文件 存档 的 工具 


如 果 要 “创建 指向 iTunes Store、 
App Store 、1Bookstore 和 Mac App Store 上 
内 容 的 链接 ”人 (链接 如 下 ) ， 可 以 使 用 羊 
果 公 司 的 Link Maker (http://itunes.apple. 
com/linkmaker ) 生成 URL 放 在 HIML 里 。 
如 果 你 是 联盟 成 员 (www.apple.com/itunes/ 
affiliates/ ) ， 人 们 通过 你 的 链接 购买 物品 时 ， 
革 果 公司 会 为 你 支付 佣金 。 


将 缩 略图 链接 到 图 像 

你 肯定 访问 过 显示 几 个 缩 略图 (图像 
的 微缩 版 本 ) 的 相册 页 面 ， 其 中 缩 略图 链 
接 到 大 一 些 的 图 像 。 这样 就 可 以 一 次 看 到 
很 多 图 像 ， 让 访问 者 选择 要 查看 全 尺寸 版 
本 的 图 像 。 

实现 其 基本 版 本 类 似 于 将 鲜花 图 像 链接 
到 其 他 页 面 的 示例 代码 (参见 图 6.3.1) 。 
人 
片 。( 也 可 以 在 单独 一 个 动态 页 面 中 实现 ， 
但 这 是 超出 HTML 能 力 的 高 级 用 法 。) 

注意 不 要 让 任何 给 定 页 面 上 的 缩 略图 
数量 太 多 。 它 们 可 能 很 小 ， 但 每 个 缩 略图 
都 会 生成 对 Web 服务 器 的 独立 请 求 ， 合 在 
一 起 就 会 让 页 面 变 慢 。 没 有 规则 规定 一 个 
页 面 放 多 少 缩 略图 是 合适 的 。 这 部 分 取决 
于 页 面 加 载 的 其 他 资源 的 数量 和 大 小 ， 也 
取决 于 网 站 的 目标 受众 。 例 如 ， 移动 设备 
加 载 资源 通常 要 慢 一 些 。 

因此 ， 如 果 你 有 很 多 缩 略 图 ， 就 要 考 
虑 将 它们 分 入 多 个 页 面 。 司 以 对 页 面 进行 
测试 ， 再 确定 最 合适 的 数量 。 

最 后 ， 推 荐 使 用 无 序列 表 ( Ul， 将 在 
第 15 章 讲 到 ) 对 缩 略图 列表 进行 标记 。 
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本 章 内 容 

口 构造 样式 规则 

口 为 样式 规则 添加 注释 

口 理解 继承 

口 层 钱 ， 当 样 式 发 生 冲突 时 
口 属性 的 值 


不 得 不 说 ， 到 目前 为 止 ， 本 书 演示 的 绝 
大 多 数 网 页 在 视觉 上 都 没有 什么 吸引 力 。 这 
是 因为 我 们 一 直 将 重点 放 在 用 HTML 定义 内 
容 上 ， 而 不 是 放 在 用 CSS ( 层 县 样式 表 ) 定 
义 样 式 上 上。 不过， 这 一 切 行将 改变 。 在 接 下 
来 的 几 章 里 ， 你 将 学 会 如 何 为 文本 和 背景 添 
加 样式 ， 实 现 多 栏 布 局 ， 建 立 起 适应 各 种 设 
备 〈( 从 手机 到 台式 计算 机 甚至 屏幕 更 大 的 设 
备 ) 的 布局 ， 等 等 。 在 这 一 曹 ， 我 们 将 从 基 
本 的 CSS 概念 讲 起 , 为 后 面 的 内 容 葛 定 基 础 。 

样式 表 不 过 是 一 种 文本 文件 ， 其 中 包含 
一 个 或 多 个 (通过 属性 和 值 ) 决定 网 页 某 特 
定 元 素 如 何 显 示 的 规则 。CSS 里 有 控制 基本 
格式 的 属性 (如 font-size 和 color ) ， 有 控 
制 布局 的 属性 (如 position 和 float ) ， 还 
有 决定 访问 者 打印 时 在 哪里 换 页 的 打印 控制 
元 率 。CSS 还 有 很 多 控制 项 目 显 示 或 消失 的 
动态 属性 ， 可 以 用 于 创建 下 拉 列 表 和 其 他 交 
互 性 组 件 。 

CSS2 是 新 旧 浏 览 器 支持 最 为 广泛 的 版 














本 ， 因 此 本 书 将 大 量 讨论 这 一 版 本 的 内 容 。 
CSS3 目前 还 没有 成 为 规 郊 ， 它 以 CSS2 为 基 
础 ， 提 供 了 大 量 设计 人 员 和 开发 人 员 长 期 期 
待 的 功能 。 这 些 功能 包括 圆 角 、 阴 影 效果 、 
文字 阴影 、 自 定义 字体 、 旋 转 文 本 、 半 透明 
痛 景 闫 色 、 多 图 像 背 景 、 渐 变 以 及 其 他 很 多 
功能 。 值 得 庆幸 的 是 现代 浏览 器 已 经 实现 了 
一 些 CSS3 的 组 件 ( 且 即 将 实现 更 多 ) ， 因 此 
从 现在 起 你 就 可 以 使 用 它们 了 。 

实际 上 ，CSS 在 近 几 年 又 添加 了 很 多 新 
的 特性 ， 以 致 于 我 们 无 法 将 所 有 的 特性 尽数 
收入 本 书 。 哎呀 , 连 CSS4 都 已 经 提 上 日 程 了 。 
不 过 ， 本 书 仍 会 介绍 一 些 最 为 有 用 的 CSS3 特 
性 ， 并 会 提供 用 以 学 习 本 书 没有 提 到 的 一 些 
特性 的 资源 的 链接 。 

CSS 很 梭 的 一 点 在 于 开发 人 员 可 以 在 
HTML 页 面 之 外 创建 CSS 文件 ， 再 将 它 应 用 
于 网 站 上 所 有 的 页 面 。 这 在 构建 网 页 之 初 及 随 
后 对 其 进行 修改 时 都 极 大 地 简化 了 样式 设置 工 
作 。 一 段 时 间 后 ， 如 果 需 要 重新 设计 网 站 ， 而 
内 容 和 结构 保持 不 变 ， 就 可 以 在 HIML 不 发 
生变 动 的 情况 下 ,为 网 页 提供 一 套 全 新 的 外 观 。 

为 充分 利用 CSS 的 优势 ， 必 须 一 以 贯 之 
地 依照 HTML 相关 章节 的 推荐 做 法 标记 网 页 。 


7.1 构造 样式 规则 
样式 表 中 包含 了 定义 网 页 外 观 的 规则 。 
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样式 表 中 的 每 条 规则 都 有 两 个 主要 部 分 : 





选择 器 (selector) 和 再 明 块 (declaration 
block ) 。 选 择 带 决定 哪些 元 系 受 到 影响 ; 声 
明 块 由 一 个 或 多 个 属性 -- 值 对 (每 个 属性 
值 对 构成 一 条 声明 ，declaration ) 组 成 ， 它 们 
指定 应 该 做 什么 (参见 图 7.1.1 ~ 图 7.1.4) 。 


COlor: red; | 一 声明 


} 属性 全 


7.1.1 样式 规则 由 选择 需 〈 表示 将 对 哪些 元 厅 
进行 格式 化 ) 和 声明 块 ( 描述 要 执行 的 格式 化 ) 组 
成 。 声 明 块 内 的 每 条 声明 都 是 一 个 由 冒号 隔 开 、 以 
分 号 结尾 的 属性 - 值 对 。 声 明 块 以 前 花 括号 开始 ， 
以 后 花 括 号 结 








h1 { 
background-color: yellow; 
color: Ted; 


;} TT 


两 条 声明 ， 每 一 条 都 有 一 个 属 
性 和 一 个 值 ; 








图 7.1.2 ”声明 的 顺序 并 不 重要 ， 除 非 对 相同 的 属 
性 定义 了 两 次 。 在 这 个 例子 中 ，color: red 也 可 以 
放 在 background-color: yellow 前 面 ， 效 果 是 一 样 
的 。 注 意 和 额外 的 空格 和 缩 进 ( 可 选 ， 但 推荐 包含 ) 
提高 了 可 读 性 








<body> 
<hi>Hey, I've got stylel</h1> 


</body> 
</htm]> 





7.1.3 ”如 果 将 图 7.1.2 中 的 样式 规则 应 用 到 下 面 
这 一 小 段 HTML 文档 中 …… 














图 7.1.4 标题 从 浏览 硕 殉 认 的 日 色 背 景 、 黑 色 文 
字样 式 变 为 黄色 背景 、 红 色 文 字 〈 另 见 彩 插 ) 


构造 样式 规则 的 步骤 

(1) 输入 selector， 这 里 的 selector 表示 
希望 进行 格式 化 的 元 素 。 第 9 章 将 讲解 如 何 
创建 各 种 类 型 的 选择 需 。 

(2) 输入 { (前 花 括号 ) 开始 声明 块 。 

(3) 输入 property:value; ， 其 中 property 
是 CSS 属性 的 名 称 ， 描 述 要 应 用 哪 种 格式 ; 
value 是 该 属性 允许 的 选项 之 一 。 本 书 从 第 10 
章 开 始 讲解 CSS 属性 和 值 。 

(4) 根据 需要 ， 重 复 第 (3) 步 。 通 币 一 行 
输入 一 个 property: value ( 一 条 声明 ) ， 如 
图 7.1.2 所 示 的 那样 ， 但 这 并 非 强制 要 求 。 

(5) 输入 }， 绪 束 声明 块 和 样式 规则 。 


在 样式 规则 中 可 以 添加 额外 的 室 格 、 
制 表 符 或 回 车 ， 从 而 提高 样式 表 的 可 读 性 ( 参 
见 图 7.1.2) 。 示例 中 的 格式 或 许 是 编码 人 员 
中 最 为 常见 的 一 种 格式 。 








从 技术 上 讲 ， 可 以 省 略 样式 规则 中 最 
后 一 条 声明 后 面 的 分 号 ， 不 过 最 好 加 上 ， 这 
是 一 种 好 习 惯 。 


7.2 为 样式 规则 添加 注释 


在 CSS 中 湛 加 注释 是 个 好 主意， 这 样 就 
可 以 标注 样式 表 的 主要 区 域 ， 或 者 只 是 针对 
某 条 规则 或 声明 进行 解释 。 注 释 不 仅 对 开发 
人 员 有 用 ， 对 阅读 代码 的 其 他 人 也 有 好 处 。 
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即便 你 是 网 站 的 唯一 开发 人 员 ， 当 你 过 几 个 
月 再 看 自己 写 的 代码 时 ， 会 庆幸 留 下 了 这 些 
注释 。 


为 样式 规则 添加 注释 

(1) 在 样式 表 中 ， 输 入 /* 开始 注释 。 
(2) 输入 注释 。 

(3) 输入 */ 结束 注释 。 


绩 阮 ”六 释 可 以 包含 回 车 ， 因 此 可 以 跨越 多 
行 。 类 似 地 ，/* 和 */ 既 可 以 单独 成 行 ， 也 可 
以 跟 文 本 同 处 一 行 ， 图 7.2.1 中 这 两 种 例子 都 
有 。 另 外 ， 注 释 还 可 以 放 到 声明 块 内 部 ,或 
者 样式 规则 后 面 ， 参 见 图 7.2.2。 





/* 

This is a CSS comment. It can be one line 
long or span several lines. This one 
Is much longer than most. Regardless, a 
CSS comment never displays in the 
browser with your site's HTML content. 


Of course, you wouldn't really write a 
‘silly comment like this that merely 
talks about comments. The next comment 
is more in line with a comment's 
‘typical use. 

*y 


/* Set default rendering of certain HTML5 
‘elements for older browsers. */ 
article, 
aside, 
figcaption, 
figure, 
footer, 
header, 
main, 
nav， 
section { 
display: block; 
} 





7.2.1 注释 可 长 可 短 ， 但 它们 通常 较 短 。 可 以 
根据 你 的 想法 ， 用 它们 描述 样式 规则 或 一 组 相关 的 
规则 的 目的 。 注 释 做 得 好 可 以 让 样式 表 更 易于 维护 
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.byline { 
color: green; 
font-size: .875em; 


text-shadow: 2px 1px 5px orange; /* IE9 
and earlier don't support */ 
} /* You can put comments here, too! */ 





图 7.2.2 我们 也 可 以 在 声明 块 内 部 或 者 样式 规则 
后 面 插 入 注释 

不 能 将 一 个 注释 谋 套 在 另 一 个 注释 内 
部 ， 下 面 的 做 法 是 不 正确 的 : 

/* 做 法 错误 ， 因 为 /* 这 条 注释 */ 几 套 在 外 
面 这 条 注释 内 部 */。 


注释 是 很 有 用 的 组 织 工具 。 样 式 表 很 
快 就 会 变 得 很 长 ， 因 此 ， 组 织 好 样式 表 对 于 
保持 CSS 易于 维护 至 关 和 重要。 通常 ， 将 相关 
的 规则 放 在 一 起 ， 形 成 分 组 ， 并 在 每 组 前 面 
放置 一 段 描述 性 的 注释 ， 参 见 图 7.2.3。 


GLOBAL NAVIGATION 


. rules for global nav ... 


MAIN CONTENT 


. rules for main content ... 


SIGN-UP FORM 


. rules for sign-up form ... 


PAGE FOOTER 


. rules for page footer ... 








图 7.2.3 ”对 样式 表 中 的 主要 区 域 添 加 注释 ， 就 可 
以 保持 样式 表 井 然 有 序 。 下 面 的 格式 (使 用 大 写字 
母 和 一 条 下 划 线 ) 可 以 很 清楚 地 标识 分 组 的 开始 
位 置 
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无 论 采 用 哪 种 注释 格式 ， 推 荐 你 定 下 
一 种 并 坚持 使 用 ,特别 是 在 团队 协作 的 情况 下 。 


fEE 可 以 将 注释 放 在 样式 规则 内 部 (参见 
图 7.2.4 ) 或 者 周围 (参见 图 7.2.5) ， 从 而 对 
浏览 器 隐藏 样式 规则 。 这 是 对 样式 表 进 行 测 
试 的 一 种 好 方法 ， 不 必 永 久 性 地 删除 注释 部 
分 ， 直 到 你 认为 可 以 删除 它们 。 这 也 是 很 有 
用 的 调试 工具 ， 可 以 将 你 认为 可 能 引起 问题 
的 地 方 “注释 掉 ”， 再 在 浏览 器 中 刷新 页 面 ， 
查看 问题 是 不 是 解决 了 。 


img { 
border: 4px solid red; 


/* margin-right: 12px; */ 





图 7.2.4 可 以 将 你 不 希望 对 页 面 产 生 影响 的 声明 
“注释 控 ”。 这 里 ， 所 有 的 图 像 都 会 拥有 一 条 4 像 
素 宽 的 红色 实 线 边框 ， 但 不 会 有 右 侧 外 边 距 ， 因 为 
margin-right: 12px; 位 于 一 条 注释 里 面 





line-height: 1.2; 


/* 
.byline { 
color: black; 
font-size: .875em; 
text-shadow: 2px 1px 5px orange; 


} 


img { 
border: 4px solid red; 
margin-right: 12px; 





图 7.2.5 ”注释 也 可 以 包围 整 条 规则 或 者 多 条 规则 。 
在 下 面 这 条 样式 规则 中 ， 只 应 用 了 段落 的 line- 
height，.byline 和 img 规则 被 注释 掉 了 。 注 意 ， 
我 删除 了 这 两 个 样式 原来 的 注释 (在 图 7.2.2 和 
图 7.2.4 中 显示 了 ) ， 这 样 再 在 它们 周围 添加 注释 
就 不 会 导致 错误 了 














6 出 于 演示 的 目的 ， 这 些 例子 都 使 用 了 
很 多 注释 ， 但 不 要 因此 认为 要 对 所 有 内 容 添 
加 注释 。 如 果 样 式 表 里 的 注释 过 多 ， 反 而 会 
难以 阅读 。 要 根据 需要 混合 使 用 组 织 性 注释 
和 描述 性 注释 。 要 针对 你 和 团队 里 的 其 他 成 
贝 > 到 一 个 二 和 胜 六 5 


7.3 理解 继承 


继承 (inheritance ) 是 CSS 里 一 个 很 重要 
的 概念 。 看 看 图 7.3.1 所 示 的 网 页 。 浏 览 胡 会 
将 这 份 HTML 理解 为 图 7.3.2 所 示 的 文档 树 。 
文档 树 有 助 于 你 理解 CSS。 原 因 是 ， 当 你 为 
某 个 元 素 应 用 CSS 属性 时 ， 这 些 属性 不 仅 会 
影响 该 元 系 ， 还 会 影响 其 下 的 分 文 元 素 。 也 
就 是 说 ， 这 些 下 层 的 元 素 继 承 了 其 祖先 元 末 
的 属性 。 只 不 过 ， 它 们 继承 的 可 不 是 冷冰冰 
的 钞票 ， 而 是 颜色 、 字 体 大 小 这 样 的 东西 。 























<body> 
<div> 
<h1>The Ephemeral Blue Flax</h1> 


<img src="img/blueflax.jpg” width="300" 
height="175" alt="Blue Flax (Linum lewisii)"/> 


<p>I am continually <em>amazed</em> 
at the beautiful, delicate Blue Flax 
that somehow took hold in my garden. 
They are awash in color every morning, 
yet not a single flower remains 
by the afternoon. They are the very 
definition of ephemeral.</p> 


<p><small>&copy; Blue Flax Society. 
</small></p> 
</div> 
</body> 
</html> 








图 7.3.1 所 有 的 内 容 元 素 都 是 body 元 素 的 后 代 。 
在 这 个 例子 中 ， 用 一 个 div 包 住 了 所 有 的 内 容 。 进 
一 步 ，em 和 small 元 率 都 包含 在 一 个 p 元 厅 里 ， 因 | 
此 它们 是 p 的 后 代 ( 同时 也 是 div 和 body 的 后 代 ) ， 
如 图 7.3.2 所 示 
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7.3.2 将 HTML 页 面 转换 为 树 形 结构 后 ， 很 容 
易 看 出 哪些 元 素 是 哪些 元 素 的 后 代 。 任 何 一 个 直接 
包含 在 男 一 个 元 素 中 的 元 素 ( 例如 在 图 7.3.1 中 ， 
img 元 素 由 div 直接 包含 ) ， 都 是 其 父 元 素 的 分 文 





body { 
font-family: Verdana, Geneva, 
; sans-serif; 
} 
div { 
border: 1px solid #000; 
overflow: hidden; 
padding: 0 1em .25em; 


pt 
color: #36c; /* a blue color */ 
font-weight: bold; 


img { 
float: left; /* makes text wrap it */ 
margin-right: 1em; 





7.3.3 这 段 应 用 于 图 7.3.1 中 HTML 的 样式 表 
在 为 页 面 设置 样式 时 体现 了 继承 的 特性 。 如 果 现 在 
不 理解 其 中 的 细节 没有 关系 ， 只 需 注 意 这 里 只 有 
body 、div 和 jp 元 系 的 样式 规则 ， 而 没有 h1、em 和 
small 元 条 的 规则 


图 7.3.1、 图 7.3.3 和 图 7.3.4 演示 了 继承 
的 实际 效果 。 例 如 ，font-family 会 被 继承 ， 
而 border 和 padding 则 不 会 继承 。 这 也 是 为 什 
人 么 页 面 上 的 文字 使 用 Verdana 字体 ， 而 只 有 
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div 拥 有 边框 (黑色 的 细 线 方 框 ) 和 内 边 距 ( 边 
框 和 div 中 内 容 之 间 的 空间 ) ， 它 的 后 代 则 没 
有 这 些 样 式 ， 如 图 7.3.4 所 示 。 此 外 ，color 和 
font-weight 属性 也 是 继承 的 ， 因 此 em 和 small 
元 系 里 的 文本 也 像 其 他 段落 文本 一 样 显示 为 
蓝 色 粗 体 文字 ， 而 不 是 浏览 融 默 认 的 黑色 非 
粗 体 文字 。 补 充 材 料 “ 哪 些 属性 会 被 继承 ” 
列 出 了 其 他 一 些 会 被 继承 的 属性 。 

可 见 ， 继 承 可 以 人 简化 样式 表 。 设 想 你 要 
为 页 面 中 的 每 个 元 素 单 独 设置 字体 ， 多 么 榴 
怖 ! 在 编写 CSS 时 ， 要 牢记 这 一 规则 ， 并 有 
效 地 利用 继承 。 

此 外 ， 对 大 多 数 属性 来 说 ， 还 可 以 使 用 
inherit 值 强 制 进行 继承 (参见 7.5 市 ) 。 











Blue Flax (Linum lewisid) 





Blue Flax (Linum lewisii) 


The Ephemeral Blue Flax 


Iam continually 
amazed at the 
beautiful, delicate 
Blue Flax that 
四 somehow took 
2 hold in my garden. 
They are awash in 
color every 
”morning, yet not a 
single flower remains by the afternoon. They are the 
very definition of ephemeral. 


© Blue Flax Society. 








7.3.4 这 里 展示 了 继承 的 实际 效果 (以 及 未 继 
承 的 效果 ) 。h1 从 body 中 继承 了 Verdana 字体 样 
式 (由 font-family 设 置 )。 它 在 图 7.3.3 中 没有 
目 己 的 样式 ， 因 此 它 还 会 根据 浏览 融 的 默认 样式 进 
行 显示 ， 即 显示 为 黑色 粗 体 的 标题 样式 。 类 似 地 ， 
em 和 small 元 素 也 没有 指定 具体 的 样式 规则 ， 但 它 
们 也 从 body 继承 了 Verdana 字体 样式 ， 从 p 继承 
了 font-weight 和 color 的 样式 。 用 small 标记 的 
文字 法律 声 明 ) 比 周围 的 文字 小 一 些 ， 这 也 是 浏 
览 需 的 默认 样式 。 最 后 ， 包 含 所 有 内 容 的 div 有 一 
个 细 线 边框 和 内 边 距 ， 但 其 中 的 其 他 元 素 没有 这 样 
的 样式 ， 因 此 这 些 属 性 不 会 被 继承 
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哪些 属性 会 被 继承 

以 下 是 会 被 继承 的 CSS 属性 ， 我 们 按照 类 型 对 其 进行 了 分 组 。 这 些 属 性 中 的 大 多 数 都 将 
在 本 书后 续 章 节 进 行 讲解 ， 不 过 你 可 以 根据 它们 的 名 称 猜 出 其 作用 。 

@ 文本 

国医 olor ee 全 外 

口 direction (方向 ) 

口 font ( 字体) 

口 font-family ( 字体 系列 ) 

口 font-size (字体 大 小 ) 

口 font-style ( 用 于 设置 斜体 ) 

口 font-variant(〈 用 于 设置 小 型 大 写字 母 ) 

口 font-weight ( 用 于 设置 粗 体 ) 

口 letter-spacing ( 字母 间距 ) 

口 line-height ( 行 高 ) 

texS onen( T2772 

口 text-indent ( 用 于 设置 首 行 缩 进 ) 

口 text-transform ( 用 于 修改 大 小 写 ) 

口 visibility (可见 性 ) 

口 white-space ( 用 于 指定 如 何 处 理 空格 ) 

口 word-spacing ( 字 间 路 ) 


@ 列表 

国 人 作 9 

口 list-style-image(〈 用 于 为 列表 指定 定制 的 标记 ) 

口 list-style-position ( 用 于 确定 列表 标记 的 位 置 ) 

口 list-style-type ( 用 于 设置 列表 的 标记 ) 

9 表格 

口 border-collapse ( 用 于 控制 表格 相 邻 单元 格 的 边框 是 否 合并 为 单一 边框 ) 
口 border-spacing ( 用 于 指定 表格 边框 之 间 的 空隙 大 小 ) 

D caption-side ( 用 于 设置 表格 标题 的 位 置 ) 

口 empty-cells( 用 于 设置 是 否 显示 表格 中 的 空 单 元 格 ) 

@ 页 面 设置 (对 于 印刷 物 》 

口 orphans ( 用 于 设置 当 元 素 内 部 发 生 分 页 时 在 页 面 底 部 需要 保留 的 最 少 行 数 ) 
口 page-break-inside ( 用 于 设置 元 素 内 部 的 分 页 方 - 

口 widows ( 用 于 设置 当 元 素 内 部 发 生 分 页 时 在 页 面 顶部 需要 保留 的 最 少 行 数 ) 
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© 其 他 


口 cursor ( 鼠标 指针 ) 
加 UL 1 


7.4 层 霍 : 当 规 则 发 生 冲突 时 


样式 的 来 源 很 多 。 正 如 你 在 第 1 章 中 学 
到 的 ， 每 个 浏览 硕 都 有 其 默认 样式 。 不 过 ， 
你 可 以 用 自己 的 样式 窗 盖 它们 或 对 它们 进行 
补充 。 应 用 样式 有 三 种 方式 从 一 个 或 多 个 
外 部 文件 导入 ( 推荐) ， 如 图 7.4.1 中 的 代码 
所 示 ,， 插入 到 HTML 文档 的 项 部， 或 直接 应 
用 于 代码 中 特定 的 HTML 元 素 上 (不 过 ， 应 
该 尽 可 能 地 避免 这 样 做 ) 。 下 一 草 将 具体 讲 
解 三 种 方式 。 

你 可 能 会 问 ， 对 某 一 给 定 元 素 应 用 多 条 
样式 规则 时 ， 会 发 生 什 么 情况 ?比如 一 条 规 
则 定义 了 一 个 元 素 的 颜色 ， 而 为 一 条 规则 定 
义 了 它 的 宽度 ， 这 两 条 规则 会 有 效 结合 ， 一 
起 应 用 到 元 素 上 。 





























<link rel="stylesheet" href="style.css” /> 
</head> 
<body> 
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pi 
color: red; 
} 


.example { 
color: blue; 


} 


.example.example-2 { 
color: magenta; 
/* 会 被 下 一 条 规则 覆盖 */ 


} 


.example.example-2 { 
color: green; 


} 





7.4.1 在 这 个 例子 中 ， 有 四 条 特殊 性 不 尽 相 同 
的 样式 规则 。 第 一 条 影响 所 有 pp 元 素 ， 第 二 条 仅 
影响 图 7.4.2 的 HTML 中 类 名 为 example 的 元 素 ， 
第 三 条 和 第 四 条 则 影响 类 名 同时 包含 example 和 
example2 的 元 于。 这 些 规则 的 顺序 并 不 重要 (除了 
最 后 两 条 ， 因 为 它们 的 选择 需 完 全 相同 ) 














<p>Here's a generic 《code>p</code> element. It will be red.</p> 


<p class="example">Here's a <code>p<¢/code> element with a «<code>class</code> of <code>example 
</code>. There are two rules that could apply, but since the <code>.example</code> selector is 


more specific, this paragraph will be blue.</p> 


<p class="example example-2">Here's a 《code>p</code> element with two classes: <code>example 
</code> and <code>example-2</code>. There are four rules that could apply to this paragraph. The 
first two are overruled by the more specific last two. However, because the last two have the 
same selector, the order breaks the tie between them: the one that appears later wins, and thus 
this paragraph will be green instead of magenta.</p> 


</body> 
</htm]> 


图 7.4.2 这 里 有 三 个 段落 : 一 个 普通 的 ， 一 个 市 有 一 个 类 名 ， 一 个 市 有 两 个 类 名 。 注 ， 





意 ， 如 果 一 个 元 素 


需要 包含 一 个 以 上 的 类 名 ， 在 HTML 中 应 使 用 空格 分 隅 不同 的 类 名 ， 但 在 CSS 中 不 能 像 这 样 定 位 元 系 。 
在 CSS 中 ， 类 名 的 前 面 使 用 点 号 (. ) 。 图 7.4.1 中 的 样式 表 文 件 名 为 style.css， 第 二 行 中 的 link 标签 会 将 











该 文件 加 载 到 页 面 中 ， 这 些 内 容 将 在 下 一 章 进 行 讲 解 
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然而 ， 有 时 候 多 条 规则 会 定义 元 系 的 同 
一 个 属性 (参见 图 7.4.1 ) ,这 时 该 怎么 办 呢 ? 
CSS 用 层 舍 的 原则 来 考虑 样式 声明 ， 从 而 判 
岂 相 互 冲突 的 规则 中 哪个 规则 应 该 起 作用 。 
首先 ， 你 编写 的 样式 如 果 与 浏览 套 的 默认 样 
式 冲突 , 均 以 你 编写 的 样式 为 准 。 在 此 基础 上 ， 
CSS 用 层 著 的 原则 来 考虑 特殊 性 ( Specificity )、 
顺序 ( order ) 和 重要 性 (importance ) ， 从 而 
判断 相互 冲突 的 规则 中 哪个 规则 应 该 起 作用 。 
不 要 受 这 些 术 语 的 有 影响， 你 只 要 去 试 ， 就 能 
明日 CSS 决定 该 应 用 哪些 样式 以 及 何 时 应 用 
这 些 样式 的 方式 。 

接 下 来 ， 我 们 详细 介绍 特殊 性 、 顺 序 和 
重要 性 。 


1. 特殊 性 

特殊 性 规则 指定 选择 融 的 具体 程度 。 选 
择 融 越 特 殊 ， 规 则 就 越 强 。 遇 到 冲突 时 ， 优 
完 应 用 特殊 性 强 的 规则 ， 如 图 7.4.3 和 图 7.4.4 
所 示 。 讲 得 通 ， 对 吧 ? 

我 们 不 限于 使 用 示例 中 显示 的 基本 选择 
天 来 定义 样式 。 第 9 草 会 涉及 特殊 性 权重 各 








#someID { ... } 


不 相同 的 其 他 类 型 的 选择 大 。 我 们 认为 id 选 
择 冀 是 最 特殊 的 ( 因为 它们 在 一 个 文件 中 必 
须 是 唯一 的 ) ， 如 图 7.4.4 所 示 。 男 一 方面 ， 
除了 浏览 帮 默认 样式 ,我 们 认为 继承 的 样式 
是 最 一 般 的 ， 可 以 被 任何 其 他 规则 窗 盖 。 











Specificity 





Specificity 
Here's a generic p element. It will be red. 


Here's a p element with a class of example. There are 
two rules that could apply, but since the .example 
selector is more specific, this paragraph will be blue. 


Here’s ap element with two classes: example and 
example-2. There are four rules that could apply to this 
paragraph. The first two are overruled by the more 
specific last two, However, because the last two haye 
the same selector, the order breaks 了 he tie between them:; 
the one that appears later wins, and thus this paragraph 
will be green instead of magenta., 





7.4.3 第 二 个 段落 是 蓝 色 的 ， 因 为 它 的 类 名 包 
括 example。 对 于 第 三 个 段落 ， 由 于 第 三 条 和 第 四 
条 规则 的 特殊 性 相同 ， 因 此 它们 的 顺序 变 为 决定 性 
因素 一 一 第 四 条 规则 后 出 现 ， 因 此 它 起 作用 








对 应 的 HTML 


"someID">...</p> 


"SomeID” class="someClass">...</p> 


"SomeID” class="someOtherClass">...</p> 


"SomeID” class="someClass someOtherClass">...</p> 














7.4.4 这 里 列 出 了 几 个 选择 吉 , 按照 特殊 性 由 低 回 高 排列 。 其 中 , 特殊 性 最 低 的 是 元 素 名 本 身 ( 最 上 面 )， 
特殊 性 最 高 的 是 ID (最 下 面 ) 。 图 7.4.1 ~ 图 7.4.3 反映 了 这 一 行为 规则 
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ID 选择 器 将 在 第 9 章 进 行 讲解 (参见 9.3 
方 ) ， 不 过 现在 要 提 一 句 ， 建 议 在 样式 表 中 
多 使 用 类 选择 器 ， 避 免 使 用 ID 选择 器 。 使 用 
ID 选择 器 通常 会 矫 枉 过 正 ， 降 低 了 灵活 性 。 


2. 顺序 

有 时 候 ， 特 殊 性 还 不 足以 判断 在 相互 冲 
突 的 规则 中 应 该 优先 应 用 哪 一 个 。 在 这 种 情 
况 下 ， 规 则 的 顺序 就 可 以 起 到 决定 作用 : 晚 
出 现 的 优先 级 高 (参见 图 7.4.1、 图 7.4.2 和 
图 7.4.3 ) 。 例 如 ， 直 接应 用 在 HTML 元 素 上 
的 规则 (不 推荐 使 用 这 种 做 法 ) 被 认为 比 外 
部 样式 表 中 或 插 在 HTML 文档 顶部 的 特殊 性 
相同 的 规则 出 现 得 更 晚 (因此 优先 级 更 高 ) 。 


3. 重要 性 

如 采 这 还 不 够 ， 可 以 声明 一 条 特殊 的 规 
则 用 盖 整 个 系统 中 的 规则 ， 这 条 规则 的 重要 
程度 要 比 其 他 所 有 规则 高 。 也 可 以 在 某 条 声 
明 的 末尾 加 上 !important， 比 如 p{ color: 
orange !important; } (除非 是 在 特殊 情况 
下 ， 否 则 不 推荐 使 用 这 种 方法 ) 。 

相关 细节 参见 8.5 市 。 








4. 小 结 

你 编写 的 样式 会 履 兰 浏览 硕 的 默认 样式 。 
当 两 个 或 两 个 以 上 的 样式 发 生 冲 突 时 ， 会 应 
用 特殊 性 高 的 样式 声明 ， 不 管 它 位 于 样式 表 
中 的 哪个 位 置 。 如 果 两 个 或 两 个 以 上 的 规则 
拥有 相同 的 特殊 性 ， 则 使 用 后 出 现 的 规则 ， 
除非 其 中 茶 条 规则 标记 了 !important。 

如 采 某 元 系 没 有 直接 指定 某 条 规则 ， 则 
使 用 继承 的 值 ( 如 有 果 有 的 话 ) 。 

如 朵 这 些 内 容 看 起 来 有 些 令 人 困惑 ， 现 
在 也 不 必 担 心 。 当 你 试 着 编写 CSS， 开 始 使 
用 一 些 选 择 带 后 , 你 会 发 现 , 在 大 多 数 情况 下 ， 
层 全 的 运行 规则 跟 你 设想 的 是 一 样 的 。 
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如 果 你 需要 复习 HTML 中 的 类 和 ID 
名 称 ， 参 见 3.14 节 。 


辆 了 园 如果 你 对 浏览 器 计算 特殊 性 权重 的 具 
体 细 节 感 兴趣 ， 可 以 查看 CSS 规范 的 第 9 部 
分 ( Www.w3.org/TR/selectors/#specificity ) 。 
注意 ， 在 学 习 本 书 第 9 章 之 前 ， 你 可 能 会 对 
规范 中 的 内 容 感 到 陌生 。 其 实 ， 编 写 CSS 不 
必死 记 硬 背 公式 化 的 内 容 。 几 乎 没有 多 少 代 
码 编 写 人 员 能 背 下 这 些 特殊 性 规则 ， 即 便 那 
些 具 有 多 年 经 验 的 程序 员 也 是 如 此 。 他 们 (以 
及 你 ) 不 必死 记 硬 背 的 原因 是 CSS 特殊 性 规 
则 实际 上 相当 直观 。 如 果 一 条 样式 并 未 按照 
你 设想 的 方式 呈现 ， 很 有 可 能 是 其 特殊 性 不 
够 高 ， 这 样 ， 你 就 可 以 从 编码 的 过 程 中 得 到 


经 验 。 


先前 提 到 ， 样 式 表 可 能 来 自 于 浏览 器 
和 代码 编写 人 员 。 实 际 上 还 有 第 三 种 来 源 ， 
即 访问 者 (尽管 这 种 来 源 并 不 常见 ) 。 有 的 
浏览 器 允许 用 户 创建 自己 的 样式 表 并 将 其 应 
用 到 他 们 所 访问 的 页 面 ( 包括 代码 编写 人 员 
的 页 面 ) ， 从 而 根据 自己 的 喜好 定制 体验 。 
例如 ， 一 个 有 视觉 障碍 的 用 户 可 能 希望 文本 
和 背景 颜色 的 对 比 度 更 大 一 些 。 实 际 上 ， 没 
有 多 少 用 户 知 道 浏览 器 的 这 一 特性 ， 使 用 它 
的 用 户 就 更 少 了 。 这 些 样式 确实 有 可 能 影响 
层 登 。 它 们 的 优先 级 部 于 浏览 器 的 默认 样 么 ， 
但 低 于 你 为 网 站 创建 的 CSS (除非 用 户 的 样 
式 表 声明 中 标记 了 !important ) 。 提 示 这 一 
点 主要 是 为 了 让 你 了 解 这 种 用 户 行为 ， 不 必 
因此 对 设置 网 页 样式 的 方法 作出 任何 改变 。 


提示 
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7.5 属性 的 值 


每 个 CSS 属性 对 于 它 可 以 接受 哪些 值 部 
有 不 同 的 规定 。 有 的 属性 只 能 接受 预定 义 的 
值 有 的 属性 接受 数 子 、 整 数 、 相 对 值 、 百 分 数 、 
URL 或 者 颜色 。 有 的 属性 可 以 接受 多 种 类 型 
的 值 。 每 个 属性 可 接受 的 值 将 在 描述 该 属性 
的 草 方 (大 多 在 第 10 章 、 第 11 草 和 第 14 章 ) 
列 出 来 ， 不 过 这 里 将 讨论 基本 体系 。 














1. inherit 

对 于 任何 属性 ， 如 有 果 和 希望 显 式 地 指出 该 
属性 的 值 与 对 应 元 系 的 父 元 素 对 该 属性 设 定 
的 值 相同 ， 束 可 以 使 用 inherit 信 。 例 如 ， 假 
设 有 一 个 article 元 素 ， 其 中 包含 儿 个 段落 。 
article 元 素 设 置 了 一 个 边框 。 边 框 通常 不 会 
被 继承 ， 因 此 p { border: inherit; } 这 条 
规则 可 以 让 这 些 段 落 获 得 相同 的 边框 样式 。 

(在 正 8 之 前 的 Internet Explorer 版 本 中 ， 大 

部 分 属性 都 不 支持 inherit 值 ， 不 过 你 大 概 也 
不 需要 文 持 那些 大 多 数 网 站 都 不 再 文 持 的 旧 
浏览 杭 。 ) 








2. 预定 义 的 值 

大 多 数 CSS 属性 都 有 一 些 可 供 使 用 的 预定 
义 值 。 例 如 ，float 属性 可 被 设 为 left、right 
或 none。 与 HTML 不 同 ,不 需要 (也 不 能 ) 将 
预定 义 的 值 放 在 3 引号 里 , 参见 图 7.5.1。 实 际 上 ， 
大 多 数 CSS 值 ， 无 论 是 否 为 预定 义 的 值 ， 都 不 
需要 加 引号 。 (也 有 一 些 例外 ， 如 超过 一 个 单 
词 的 font-family 名 称 ， 以 及 要 生成 的 内 容 。 ) 


预 设 值 


一 
border: none; 





7.5.1 很 多 CSS 属性 只 接受 预定 义 的 值 。 要 准 
硝 地 输入 这 些 值 ， 并 且 不 要 加 上 引号 


3. 长 度 和 百分数 

很 多 CSS 属性 的 值 是 长 度 。 所 有 长 度 都 
必须 包含 数字 和 单位 ， 并 且 它 们 之 间 没 有 空 
格 。 例 如 3em、10px， 人 参见 图 7.5.2。 唯 一 的 例 
外 是 0， 它 可 以 带 单 位 也 可 以 不 带 。 效 果 是 一 
样 的 ， 因 此 0 一 般 不 带 单位 。 


长 度 


font-size: .875em; 








7.5.2 ”必须 显 式 指出 长 度 的 单位 。 在 单位 和 数 
值 之 间 应 该 没有 空格 
有 的 长 度 是 相对 于 其 他 值 的 。 一 个 em 的 
长 度 大 约 与 对 应 元 素 的 字号 相等 。 例 如 ， 对 
元 素 设 置 margin-left: 2em 就 代表 将 元 素 的 
左 外 边 距 设 为 元 素 字 号 的 两 倍 。 ( 当 em 用 于 
设置 元 素 的 font-size 属性 本 身 时 ， 它 的 信 继 
节目 对 应 元 系 的 父 元 对 的 字号 ， 第 10 章 会 讨 
论 这 一 点 。 ) em 的 这 种 相对 性 对 如 今 的 网 站 
建设 工作 来 说 是 至 关 重 要 的 ， 尤 其 是 对 那些 
需要 适应 不 同 屏 医 太 十 的 网 站 来 说 〈 这 种 做 
法 被 称 为 响应 式 Web 设计 ， 将 在 第 12 章 介 
绍 ) 。 此 外 ，rem 单位 是 相对 于 html 元 素 的 
字体 大 小 的 ， 参见 10.6 市 。 
如 果 用 过 Adobe Photoshop 这 样 的 软件 ， 
你 一 定 很 熟悉 像 系 的 概念 。 跟 em 不 同 ， 像 素 
(px ) 并 不 是 相对 于 其 他 样式 规则 的 。 因 此 
以 px 为 单位 的 值 不 会 像 以 em 为 单位 的 值 那 
样 受 font-size 设置 的 影响 。 不 过 ， 在 如 今 设 
备 种 类 繁多 的 情况 下 ， 已 经 很 难 再 准确 度量 
一 个 像素 的 实际 大 小 了 。 某 种 设备 上 一 个 像 
素 的 大 小 不 一 定 与 另 一 种 设备 上 的 完全 相等 。 
( 参见 Peter-Paul Koch 对 此 问题 的 详细 说 明 ， 
Www.qulirksmode.org/blog/archlves/2010/04/a_ 
pixel_is_not.html。 和 警告 : 有 些 内 容 可 能 不 好 
介 。 ) 有 时 候 我 们 需要 使 用 px， 只 是 没 那么 





















































图 灵 社区 会 员 wenshanjun 专 享 尊重 版 权 


还 有 一 些 无 需 说 明 的 绝对 单位 ， 如 傍 
(pt ) ， 应 该 在 为 打印 准备 的 样式 表 中 保留 





知 的 情况 下 使 用 绝对 长 度 ( 如 在 打印 的 页 面 
中 使 用 pt ) 。 

百分数 ( 如 65% ) 的 工作 方式 很 像 em， 
它们 都 是 相对 于 其 他 值 的 值 ， 参 见 图 7.5.3。 
出 于 这 个 原因 ， 百 分 数 是 创建 我 们 很 快 就 要 
学 习 的 响应 式 网 站 的 一 个 强大 工具 。 





百分数 


和 
width: 80%; 








7.5.3 ”百分数 通 妆 是 相对 于 父 元 素 的 。 因 此 ， 
在 这 个 例子 中 ， 字 号 将 被 设 为 父 元 素 字 号 的 80% 
在 上 述 单位 中 ， 最 帝 使 用 的 是 em、 百 分 
数 和 像 系 ，rem 的 使 用 情况 越 来 越 多 。 你 的 样 
式 表 可 以 自由 组 合 使 用 上 述 单位 ， 即 使 是 在 
同一 条 样式 规则 中 ， 也 可 以 组 合 使 用 不 同 的 
单位 。 还 有 其 他 一 些 单位 ， 不 过 鲜 有 使 用 。 


4. 纯 数 字 

只 有 极 少数 的 CSS 属性 接受 不 带 单位 的 
数字 ， 如 3、0.65。 其 中 最 和 常见 的 就 是 line- 
height( 参见 图 7.5.4 )、z-index 和 opacity( 分 
别 参见 10.7 节 、11.15 节 和 14.8 节 ) 。 














加 请 


line-height: 1.5; 





7.5.4 不 要 将 数字 、 整 数 和 长 度 弄 混 。 数 字 或 
整数 没有 单位 (如 px) 。 这 个 例子 中 的 值 将 与 字 
号 相 乘 ， 得 到 行 高 


5. URL 
有 的 CSS 属性 允许 开发 人 员 指 定 为 一 个 
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文件 (尤其 是 图 像 ) 的 URL，background- 
image 就 是 这 样 一 个 属性 。 在 这 种 情况 下 ， 使 
用 url(file.ext)， 其 中 左 1le.ext 是 目标 资 
源 的 路 径 和 文件 名 ， 参见 图 7.5.5。 注 意 ， 规 
范 指 出 ， 相 对 URL 应 该 相对 于 样式 表 的 位 置 
而 不 是 相对 于 HTML 文档 的 位 置 。 





URL 





一 一、 
background: url(bg-pattern.png); 





7.5.5 CSS 属性 中 的 URL 无 需 使 用 引号 包围 


可 以 在 文件 名 上 加 上 引号 ， 但 这 不 是 必 
需 的 。 此 外 ， 在 单词 url 和 前 括号 之 间 不 应 该 
有 空格 。 括 号 和 地 址 之 间 人 允许 有 空格 ， 但 这 
不 是 必需 的 (通常 也 不 这 样 做 ) 。 

关于 编写 URL 本 身 的 信息 , 参见 1.7 节 。 


6. CSS 颜色 

我 们 可 以 使 用 预定 义 颜 色 关 键 字 或 以 
十 六 进 制 (通常 称 为 hex) 、RGB、HSL.、 
RGBA、HSLA 等 格式 表示 的 值 中 为 CSS 局 
性 指定 颜色 。 最 后 两 种 格式 可 以 指定 具有 一 
定 程 度 alpha 透明 度 的 颜色 。HSL、RGBA 和 
HSLA 格式 都 是 在 CSS3 中 引入 的 。 

CSS3 指定 了 CSS2.1 本 来 就 有 的 16 个 
基本 的 名 称 ( 参见 图 7.5.6) ， 另 外 又 增加 了 
131 个 。 完 整 的 列表 见 www.w3.org/TR/css3- 
color/#svg-color。 

当然 ， 除 了 几 样 最 简单 的 名 称 ， 没 
有 人 记得 住 这 些 颜色 名 。 可 以 使 用 Adobe 
Photoshop 等 工具 进行 取 色 ， 但 它们 并 不 使 用 
CSS 颜色 名 ,你 获取 的 是 RGB 或 十 六 进 制 值 。 
此 外 ， 颜 色 关 键 字 也 只 是 你 使 用 的 颜色 中 很 
小 的 一 部 分 ， 因 此 在 实践 中 ， 定 义 CSS 颜色 
更 常规 的 方法 是 使 用 十 六 进 制 格式 (这 是 目 
前 为 止 最 为 第 见 的 方式 ) 或 RGB 格式 。 当 然 ， 
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要 指定 alpha 透明 度 的 情况 除外 ， 这 时 应 该 用 
RGBA 和 HSLA 格式 。 


16 种 基本 颜色 关键 字 


aqua 水绿) ”black( 黑 ) 
#00FFFF 


blue〈 蓝 ) 
#0000FF 


fuchsia (紫红 ) 


#000000 #FFOOFF 


lime( 浅 绿 ) ”maroon ( 褐 ) 
#00FFOO 


green 〈 绿 ) 
#008000 


gray( 灰 ) 
#808080 


navy (深蓝 ) ”olive (橄榄 ) ” purple ( 紫 ) red 〈 红 ) 
#000080 #808000 #800080 #FFOOO00 


yellow〔 黄 ) 
#FFFF00 


#800000 


white 〈 白 ) 
#FFFFFF 


teal 〈 深 青 ) 
#008080 


silver 〈 银 ) 
#COCOCO 





7.5.6 16 种 基本 颜色 关键 字 ， 以 及 它们 对 应 的 
十 六 进 制 数字 值 。CSS3 新 增 了 131 个 关键 字 ， 不 
过 通过 十 六 进 制 、RGB 或 HSL 等 格式 可 以 定义 多 
得 多 的 颜色 。 男 见 彩 插 


7. RGB 

可 以 通过 指定 红 、 绿 、 蓝 〈 这 也 是 RGB 
这 一 名 称 的 由 来 ) 的 量 来 构建 自己 的 颜色 。 
可 以 使 用 百分数 、0 ~ 255 之 间 的 数字 来 指定 
这 三 种 颜色 的 值 。 例 如 , 如果 创 建 一 种 次 紫色 ， 
可 以 使 用 89 份 红 、127 份 蓝 、0 份 绿 。 这 个 
颜色 可 以 写 做 rgb(89，0，127)， 如 图 7.5.7 
所 示 。 








颜色 中 红色 的 量 


颜色 中 绿色 的 量 


| 颜色 中 蓝 色 的 量 


请 
color: Tgb(89，0，127); 





7.5.7 表示 CSS 颜色 的 另 一 种 方式 是 用 0 ~ 
255 之 间 的 数字 指示 RGB 数值 。 首 先 定义 红色 ， 
然后 是 绿色 ， 最 后 是 蓝 色 

此 外 ， 也 可 以 将 每 个 值 表示 为 百分数 ， 
不 过 很 少 用 到 这 种 做 法 ， 可 能 因为 Photoshop 
等 图 像 编辑 带 通常 用 数字 表示 RGB 值 。 如 
果 你 想 使 用 百分数 ， 可 以 将 上 面 的 颜色 写作 
rgb(35%，0%，50%) ， 因 为 89 是 255 的 35%， 
127 是 255 的 50%。 











8. 十 六 进 制 数 

我 把 最 常用 的 方法 放 在 最 后 讲解 ， 参 见 
图 7.5.8。 将 这 些 数字 值 转化 为 十 六 进 制 ， 然 
后 将 它们 合并 到 一 起 ， 再 在 前 面 加 一 个 #， 恕 
像 #59007F 这 样 。 你 心里 可 能 想 : “为 什么 
不 用 十 进 制 呢 ?”” 别 惨 ， 类 似 于 Photoshop 这 
样 的 工具 在 选择 颜色 时 可 以 显示 颜色 的 RGB 
值 ， 以 及 对 应 的 十 六 进 制 数 。 此 外 你 也 可 以 
上 网 搜索 免费 的 转换 工具 (如 输入 rgb to hex 


converter ) 。 








颜色 中 红色 的 量 


颜色 中 绿色 的 量 


颜色 中 蓝 色 的 量 
上 


color: #59007f; 








7.5.8 CSS 中 定义 颜色 最 常用 的 方式 是 用 十 六 
进 制 数 指定 颜色 所 包含 的 红 、 绿 、 蓝 的 量 
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对 于 #59007F， 十 六 进 制 的 59、00、7F 
分 别 等 于 89、0、127。7F 和 7f 都 是 允许 的 
写法 ( 我 倾向 于 使 用 后 一 种 写法 ,不 过 很 多 
开发 人 员 和 设计 人 员 都 选择 前 一 种 ) 。 

如 果 一 个 十 六 进 制 颜色 是 由 三 对 重复 的 
数字 组 成 的 ， 如 #ff3344， 可 以 缩写 为 #f34。 
这 种 做 法 也 是 一 种 最 佳 实践 ， 因 为 没有 理由 
让 代码 无 谓 地 变 长 。 


9. 更 多 CSS3 提供 的 指定 颜色 的 方式 : 
RGBA、HSLA 和 HSL 

CSS3 引入 了 为 一 种 指定 闫 色 的 方式 一 一 
HSL， 以 及 通过 RGBA 和 HSLA 设置 alpha 
透明 上 度 的 能 力 。( 使 用 十 六 进 制 记 法 无 法 指 
示 alpha 透明 度 。 ) 


© RGBA 


RGBA 在 RGB 的 基础 上 加 了 一 个 代表 
alpha 透明 度 (alpha transparency) 的 A。 
alpha 远 明 上 度 的 一 种 常见 使 用 场景 是 将 其 用 在 
对 元 素 设 置 background-color 或 background 
的 情况 〈 均 用 于 设置 育 景 ) ， 参 见 图 7.5.9 和 
图 7.5.10， 因 为 alpha 透明 度 人 允许 元 率 下 面 的 
任何 东西 《如 图 像 、 其 他 颜色 、 文 本 等 ) 透 
过 来 并 与 元 素 混 合 在 一 起 ( 如 图 7.5.11 所 示 ) 。 
也 可 以 对 其 他 基于 颜色 的 属性 使 用 alpha 透 
明度 ， 如 color、border、border-color、box- 
shadow、text-shadow 和 等。 所 有 现代 浏览 器 
都 支持 alpha 透明度， 但 IE9 之 前 的 Internet 
Explorer 不 文 持 ( 如 图 7.5.12 所 示 ) 。 

可 以 在 红 、 绿 、 赣 数值 后 面 加 上 一 个 用 
以 指定 透明 度 的 0 到 1 之 间 的 小 数 。 霹 法 如 下 : 




















property: rgba(red, green, blue, alpha 
transparency); 
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alpha 设置 越 接近 0， 颜色 就 越 透明 。 如 
采 设 为 0， 就 是 完全 透明 的 ， 就 像 没 有 设置 任 
何 颜 色 。 类 似 地 ，1 表示 完全 不 透明 。 

为 了 解释 上 面 的 说 法 ， 下 面 给 出 了 一 些 
声明 示例 : 

/* 不 透明 ， 和 ITgb(89，0，127); 效果 相同 */ 

background-color: rgba(89,0,127,1); 

A 人 党 

background-color: rgba(89,0,127,0); 

/* 25% 透明 */ 

background-color: rgba(89,0,127,0.75); 

/* 60% 透明 */ 

background-color: rgba(89,0,127,0.4); 

当 人 多 六 本 让 人 这些 记 六 下 第 运行， 
需要 将 它们 放 入 一 个 或 多 个 规则 中 ( 参见 
图 7.5.9) 。 可 以 看 到 ， 尽 管 RGB 颜色 值 是 
一 样 的 ， 但 由 于 设置 了 不 同 的 透明 度 ， 颜 色 
在 浏览 六 中 显示 的 样子 就 不 一 样 了 ， 参 见 
图 7.5.11。 


© HSL 和 HSLA 


HSL 和 HSLA 也 是 CSS3 中 新 增 的 。 
HSLA 是 除 RGBA 以 外 为 颜色 设置 alpha 透 
明度 的 另 一 种 方式 。 用 HSLA 指定 alpha 透 
明度 的 方法 与 RGBA 是 一 致 的 。 待 会 儿 再 看 
HSLA， 先 看 看 HSL 的 工作 原理 。 

HSL 代表 色相 (hue ) 、 饱 和 度 ( saturation ) 
和 亮度 (lightness ) ， 其 中 色相 的 取 值 范围 为 
0 ~ 360， 饱 和 度 和 亮度 的 取 值 均 为 百分数 ， 
范围 为 0 ~ 100%， 如 图 7.5.13 所 示 ，0 和 
360 在 顶部 汇合 ， 意 思 是 0 和 360 代表 同一 种 
颜色 : 红色 。 饮 和 度 和 亮度 设置 会 直接 应 用 
到 颜色 上 (不 要 将 HSL 和 HSB、HSYV 混 消 。 
它们 很 相似 ， 但 不 是 一 回 事 ，CSS 不 允许 用 
HSB 和 HSV 表示 颜色 ) 。 
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/* 设置 重复 页 面 背 景 图 像 和 默认 文字 颜色 、 字 体 、 
字号 和 
body { 
background: url(../img/bg-pattern.png); 


/* 由 于 继承 原因 ， 这 些 文字 样式 会 应 用 到 所 
有 的 文字 ， 除 非 定 义 了 其 他 样式 和 覆盖 前 面 
的 样式 */ 

color: #ff0; /* 十 六 进 制 黄色 */ 

font-family: arial, helvetica, 

— sans-serif; 

font-size: 100%; 


| 


/* 所 有 段落 都 会 显示 纯色 背景 ， 除 非 指定 下 列 类 别 
之 一 。IE9 之 前 的 版 本 不 支持 透明 色 ， 无 论 如 何 都 


background-color: rgb(60,143,0); 
font-size: 1.75em; 
padding: .5em; 


/* 25% 透明 度 */ 
.test-1 { 

background-color: rgba(60,143,0,.75); 
} 


/* 60% 透明 度 */ 
.test-2 { 

background-color: rgba(60,143,0,.4); 
} 


图 7.5.9 这 份 简 单 的 样式 表 对 整个 页 面 应 用 了 一 
个 重复 显示 的 背景 图 ， 设 置 了 默认 文字 颜色 ， 并 依 
据 类 别 的 不 同 对 各 个 段落 添加 了 不 同 的 背景 ， 参 见 
图 7.5.10。 现代 浏览 絮 显 示 的 结果 如 图 7.5.11 所 示 。 
IE9 之 前 的 版 本 不 支持 RGBA， 因 此 它们 会 忽略 对 
.test-1 和 .test-2 的 声明 ， 和 耻 接 显示 为 p 应 用 的 
RGB 颜色 样式 ， 参 见 图 7.5.12 


在 CSS 中 , HSL 语 法 为 (具体 参见 
图 7.5.14): 








property: hsl(hue, saturation, lightness); 
HSLA 的 格式 为 : 


property: hsla(hue, saturation, 
> lightness, alpha transparency); 


看 一 下 更 新 后 的 样式 表 ( 其 中 省 略 了 部 





分 相同 的 代码 ) ， 如 图 7.5.15 所 示 。 这 张 样 
式 表 使 用 HSL 和 HSLA 定义 了 与 前 例 中 使 用 
RGB 和 RGBA 定义 的 同样 的 绿色 。 


<body> 


<p class="test-1">This background is 25% 
> transparent.</p> 


<p class="test-2">This background is 60% 
=» transparent.</p> 


<p>This has the same background color as 
> the other two, but doesn't have an alpha 
> transparency setting.</p> 


</body> 
</html> 





图 7.5.10 第 一 个 段落 有 test-1 的 类 名 ， 因 此 根 
据 样 式 表 ， 它 有 25% 透明 的 背景 色 。 第 二 个 段落 
有 test-2 的 类 名 ， 因 此 有 60% 透明 的 背景 色 。 最 
后 一 个 段落 没有 任何 类 名 ， 因 此 它 的 背景 色 是 纯色 
的 ， 由 图 7.5.9 中 对 所 有 p 元 紊 定义 的 样式 (第 二 
条 规则 ) 所 指定 








RCBA Example 
RGBA Example | 








图 7.5.11 我 们 可 以 看 到 页 面 背 景 图 透 过 了 前 两 个 
段落 的 背景 ， 但 没有 透 过 最 后 一 个 段落 的 背景 。 这 
三 个 段落 的 背景 色 都 是 一 样 的 ， 但 由 于 alpha 透明 
度 不 同 ,它们 看 起 来 就 像 是 次 浅 不 同 的 三 种 绿色 ( 参 
见 图 7.5.9 中 body 规则 的 CSS 注释 ， 了 解 如 何 实 
现 这 里 的 文本 样式 ) 
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@ imtemet|1Protected Mode On 确 机 4D0% -| 





图 7.5.12 正直 到 IE9 才 文 持 alpha 透明 度 (RGBA 
或 HSLA ) 。 这 是 IE8 中 的 截图 。IE8 忽略 了 样式 
表 中 的 GRBA 声明 ， 因 为 它 并 不 理解 这 些 规则 。 

因此 所 有 的 段落 都 是 纯色 背景 (由 对 p 元 素 进 行 定 
义 的 规则 指定 ) 。 如 果 没 有 这 条 规则 ， 则 段落 不 会 











有 任何 背景 色 ( 段落 中 的 文字 现在 看 起 来 已 经 不 正 
秀明 效 采 ) 


确 了 ， 这 是 因为 现在 没有 透 





图 7.5.13 HSL 色相 值 沿 顺 时 针 改 变 。 最 右边 的 
点 为 90， 最 底部 的 点 为 180， 最 左边 的 点 为 270， 
0 和 360 在 顶端 重合 。 关 于 标准 颜色 及 色相 值 参见 
补充 材料 “如 何 构想 HSL” 
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body { 
， 与 前 例 相 同 的 样式 .…. 
} 


/* 所 有 段落 都 会 显示 纯色 背景 ， 除 非 指定 
rm 。，。， 
十 六 进 制 颜色 */ 
pi 
background-color: #3c8f00; /* for IE 
~» before IE9 */ 
background-color: hsl1(95,100%,28%); 


} 


/* 25% 透明 度 */ 
.test-1 { 

background-color: 

—» hsla(95,100%,28%, .75); 
} 


/* 60% 透明 度 */ 
.test-2 { 

background-color: hsla(95,100%,28%,.4); 
} 





7.5.15 ”同样 的 样式 表 ， 但 使 用 HSL 和 HSLA 
表示 。 上 此外， 我 们 还 针对 旧 浏 览 喜 为 段落 定义 了 备 
选 的 background-color ( 背景 色 ) 。p 中 声明 的 顺 
序 是 有 要 求 的 。 旧 版 本 的 正 使 用 第 一 行 ， 因 为 它 
能 理解 这 一 行 ， 而 现代 浏览 需 对 这 两 行 都 理解 ， 它 
会 应 用 第 二 行 的 样式 ， 因 为 它 出 现在 后 面 


如 采 你 仔细 看 看 这 些 定 义 p 人 
规则 ， 你 会 发 现 一 些 有 趣 的 事情 。 这 里 使 用 
十 六 进 制 数 定义 了 background-color， 紧 接 
着 又 使 用 HSL 格式 重新 定义 了 一 过 。 这 样 
做 的 原因 是 Internet Explorer 的 所 有 版 本 都 理 
解 十 六 进 制 值 ， 但 IE9 之 前 的 版 本 无 法 理解 
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HSL 或 HSLA。 这 些 旧 的 浏览 絮 会 忽略 HSL 
和 HSLA 样式 ， 就 像 忽略 RGBA 一 样 ， 而 其 
他 的 浏览 硕 则 会 应 用 这 些 定 义 。 这 样 做 的 结 
果 就 是 新 的 样式 表 在 现代 浏览 妖 中 保持 了 
致 的 效果 ( 如 图 7.5.11 所 示 ) ， 而 IE8 也 没 
有 变化 (如 图 7.5.12 所 示 ) 。 

并 非 所 有 的 图 像 编 辑 硕 都 可 以 在 对 话 
框 中 指定 HSL (可 以 为 Photoshop 安装 一 个 
插件 ) 。 不 过 ， 通 过 Brandon Mathis 强大 的 
饮 费 在 线 工具 HSL Color Picker (hslpicker. 
com ) 可 以 选取 颜色 ， 获 取 其 HSL 值 、 十 六 
进 制 数值 和 RGB 值 。 还 可 以 输入 这 些 格式 的 
颜色 值 ， 查 看 颜色 的 变化 。 通 过 在 线 搜索 还 
可 以 找到 更 多 其 他 的 颜色 工具 。 


前 面 已 经 提 到 , 正直 到 IE9 才 能 理解 
RGBA、HSL 和 HSLA。 可 以 为 这 些 旧 浏 览 器 单 
独 定 义 备 选 的 纯色 (参见 图 7.$.9) ， 也 可 以 在 同 
一 条 规则 中 提供 备 选 的 纯色 (参见 图 7.5.15) 。 














如 果 确 实 想 在 旧版 本 的 于 中 使 用 
alpha 透明 度 ， 也 可 以 找到 一 些 方法 。 一 种 
方法 是 使 用 一 个 1 像素 x1 像 素 的 半 透 明 
PNG 作为 重复 的 背景 (参见 10.10 市 )， 
ee 
PNG 定义 备 选 表 景 (类 似 于 图 7.5.15 ) 。 
以 在 rgbapng.com 网 站 上 创建 所 需 的 图 攻 
只 是 需要 注意 不 要 在 文件 名 中 使 用 .part 的 后 
级 (这 是 它 默 认 添 加 的 ) 。 另 一 种 方法 是 使 
用 下 专 有 的 Gradient 滤 镜 。 它 的 语法 很 令 
人 前 溃 ， 不 过 好 在 有 专门 创建 这 些 代码 的 工 
有 具 ， 如 Michael Bester 的 RGBA & HSLA CSS 
Generator for Internet Explorer ( http://Kimili. 
com/journal/rgba-hsla-css-generator-for-internet- 
explorer ) 。 注 意 ， 过 多 地 使 用 滤 镜 可 能 会 减 
慢 页 面 在 下 中 的 加 载 速度 。 


如 何 构想 HSL 

学 习 HSL 的 逻辑 需要 花 些 时 间 ， 但 
是 一 旦 找到 感觉 ， 你 会 发 现 它 比 其 他 的 格 
式 更 容易 使 用 。Brandon Mathis 在 其 HSL 
Color Picker 网 站 的 ”Why?“ (为 何 使 用 
HSL ) 部 分 对 这 种 格式 有 一 段 精彩 的 解释 。 
他 写 道 

“选择 一 个 0 到 360 之 间 的 色相 ， 并 
将 饱和 度 设 为 100， 亮 度 设 为 S0， 就 会 得 到 
这 种 颜色 最 纯 的 形式 。 降 低 饱 和 度 ， 闫 色 就 
会 向 灰色 变化 。 增 加 亮度 ， 闫 色 就 会 向 和 白 Ls 
变化 ; 减少 亮 光度 ， 颜色 就 会 向 黑色 变化 。 

例如 ， 活 着 圆 环 移动 的 过 程 中 可 以 得 
到 下 面 这 些 人 

口 红色 为 hsl(0,100%,50%); 

口 黄色 为 hs1(60,100%,50%) ; 
绿色 为 hsl(120,100%,50%); 
青色 为 hs1(180,100%,50%) ; 
蓝 色 为 hsl(240,100%,50%); 
紫红 色 为 hs1(300,100%,50%) ; 


一 


3 
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操作 梓 陈 表 


本 章 内 容 

口 创建 外 部 样式 表 

口 链接 到 外 部 样式 表 

口 创建 庶 入 式样 式 表 

口 应 用 内 联 样 式 

口 样式 表 的 层 车 和 顺序 

口 使 用 与 媒体 相关 的 样式 表 
口 信 鉴 其 他 人 的 灵感 : CSS 








在 开始 定义 样式 表 之 前 ， 要 知道 如 何 创 
建 和 使 用 包含 这 些 样 式 表 的 文件 。 在 本 章 中 ， 
你 将 学 习 如 何 创建 样式 表 文 件 ， 如 何 将 CSS 
应 用 到 多 个 网 页 (包括 整个 网 站 ) 、 单 个 页 
面 或 单独 的 HTML 元 素 。 我 们 会 通过 三 种 方 
法 实现 这 些 应 用 : 外 部 样式 表 ( 首选 方法 ) 、 
梭 入 样式 表 和 内 联 样式 (最 不 可 取 的 方法 ) 。 

在 随后 的 儿童 ， 我 们 将 学 习 如 何 创建 样 
式 表 中 的 内 容 。 


8.1 创建 外 部 样式 表 


外 部 样式 表 非 常 适 合 给 网 站 上 的 大 多 数 
页 面 或 者 所 有 页 面 设置 一 致 的 外 观 。 可 以 在 
一 个 外 部 样式 表 中 定义 全 部 样式 ， 然 后 让 网 
站 上 的 每 个 页 面 加 载 这 个 外 部 样式 表 ， 从 而 
确保 每 个 页 面部 有 相同 的 设置 。 尺 省 后 面 你 
将 学 到 藤 入 样式 表 和 内 联 样式 表 ， 但 从 外 部 
样式 表 为 页 面 添加 样式 才 是 最 佳 实 践 ， 推 存 




















使 用 这 种 方法 ( 允许 偶尔 的 例外 ) 。 


创建 外 部 样式 表 的 步 又 

(1) 在 你 选择 的 文本 编辑 带 ( 参见 第 一 条 
提示 ) 中 创建 一 个 新 文档 。 大 多 数 人 使 用 同 
一 个 编辑 器 创建 HTML 和 CSS 文档 。 

(2) 为 网 页 定义 样式 规则 ， 同 时 ， 根 据 需 
要 在 CSS 中 添加 注释 (参见 7.1 节 和 7.2 市 )， 
如 图 8.1.1 所 示 。 

(3) 将 文档 以 纯 文本 格式 保存 在 希望 放置 
的 目录 中 。 尽 管 任何 名 称 都 是 允许 的 ， 但 应 
该 为 该 文件 添加 .css 的 扩展 名 ， 表 明 这 是 一 
个 层 闭 样式 表 ， 如 图 8.1.2 所 示 。 











untitled text 





(no symbolselectedj ;| | 狐 v| 硕 。 


Untitled text Hr 


img 二 
border: 4px solid red; 


S| 


That is a shorter way of Writing this: 


img { 
border-width: 4px; 
border-style: solid; 
border-color: red; 








图 8.1.1 使 用 任何 你 喜欢 的 文本 编辑 器 创建 样式 
表 。 这 是 Mac 上 的 TextWrangler。 我 在 文档 底部 包 
含 了 一 条 CSS 注释， 以 表明 border 属性 的 工作 原 
理 ， 这 跟 8.5 节 中 的 内 容 相 关 。 这 里 绝对 不 是 建议 
你 为 样式 表 中 的 每 一 条 规则 添加 注释 
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Save As: | style.css 








[4 *]| 3 玻 外 wm | | 入 website 
[Nm | Date Modified 


a example,html 3°59 PM 











FAVORITES 
RY Applications 
加 Desktop 
| Documents 
© Downloads 
坷 Movies 
J Music 
Pictures 


DEVICES 











Line breaks: | Unix (LF) 司 
Encoding: | Unicode (UTF-8) $1 


emer | se 


8.1.2 一 定 要 将 CSS 文件 保存 为 以 .css 为 扩展 
和 名、 用 UTF-8 编码 的 文件 。 有 的 编辑 带 需 要 用 户 
指定 将 文件 保存 为 纯 文本 格式 ( 编辑 右 可 能 称 其 为 
Text Document ( 文本 文档 ) 、Plain Text ( 纯 文 本 ) 、 
ASCI 等 ) ， 但 TextWrangler 并 不 需要 。Notepad 
会 要 求 这 样 做 ， 更 多 信息 参见 2.3 证。 注意 这 里 
将 style.css 与 将 会 用 到 它 的 HTML 页 面 ( example. 
html ) 放 在 同一 个 目录 。 这 样 做 可 以 让 这 个 例子 变 
得 相当 简单， 但 在 实践 中 ， 最 好 将 样式 表 文 件 放 在 
单独 的 目录 ， 从 而 让 网 站 具有 良好 的 组 织 结构 


在 下 一 节 ， 你 将 学 到 如 何 将 样式 表 加 载 
到 HTML 页 面 里 ， 从 而 让 样式 规则 应 用 到 页 
面 上 。 











| New Folder | 














关于 可 用 于 编写 CSS 的 文本 编辑 器 的 
人 信息， 参见 2.2 节 。 


天 时” 如果 你 现在 对 CSS 本 身 还 不 大 理解 ， 
不 必 担 心 。 在 接 下 来 的 几 章 ， 你 将 学 会 如 何 
创建 这 样 的 样式 规则 。 不 过 通常 都 可 以 猜 出 
效果 ， 例如， 本 市 例子 中 规则 的 意思 是 “为 
页 面 上 所 有 img 元 素 添 加 4 像素 宽 的 红色 实 
线 边 框 ”。 





可 以 以 任何 名 称 为 样式 表 文 件 命 名 。 
因此 ， 如 果 网 站 只 有 一 个 样式 表 文 件 ， 通 常 
会 命名 为 style.css 或 styles.css。 更 大 的 网 站 则 
通常 会 拥有 多 个 样式 表 文 件 。 在 那 种 情况 下 ， 
base.css、global.css 和 main.css 是 常见 的 样式 
表 名 称 ， 它 们 通常 包含 应 用 于 网 站 大 多 数 页 
面 的 样式 规则 。 网 站 制作 者 通常 创建 一 些 为 
菜 些 区 块 所 特有 的 附加 CSS 文件 (它们 都 会 
被 加 载 到 相关 页 面 ), 作为 对 基本 样式 的 补充 。 
例如 ， 对 于 一 个 商业 网 站 ，products.css 包含 
的 可 能 是 为 产品 相关 页 面 准备 的 样式 规则 。 
无 论 选 择 什么 文件 名 ,一定 不 要 和 包含 空格 。 


外 部 样式 表 要 么 是 通过 链接 引用 的 ( 参 
见 82 节 ) ， 要 么 是 导入 的 (通过 @import ) ， 
不 过 不 推荐 导入 。@import 指令 会 影响 页 面 的 
下 载 速 度 和 呈现 速度 ， 在 Internet Explorer 中 
影响 更 为 明显 。Web 性 能 专家 Steve Souders 
对 此 问题 进行 了 讨论 ， 参 见 www.stevesouders. 
com/blog/2009/04/09/dont-use-import/。 如 果 读 者 
对 @import 好 和 奇 ,请 查阅 http://reference.sitepoint. 
com/css/at-import 了 解 基础 知识 。 


和 CSS 注释 (参见 图 8.1.1 ) 既 不 会 影响 
页 面 的 呈现 ， 也 不 会 显示 在 网 页 上 ， 但 如 果 
访问 者 查看 源 代 码 ， 就 能 看 到 它们 (参见 本 
章 后 面 的 8.7 节 ) 。 


8.2 ”链接 到 外 部 样式 表 


创建 了 样式 表 (人 参见 图 8.2.1 ) 之 后 ， 需 
要 将 它 加 载 到 HTML 页 面 中 去 ， 从 而 为 内 容 
应 用 这 些 样 式 规则 。 要 做 到 这 一 点 ， 最 好 的 
方式 是 链接 到 样式 表 ( 参见 图 8.2.2 ) 。 
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img { 


border: 4px solid Ted; 


} 


8.2.1 这 是 本 章 前 面 创 建 的 外 部 样式 表 style.css， 
人 简洁 起 见 ， 省 略 了 CSS 注释 





<!lDOCTYPE html> 

<html Jang= en > 

<head> 
<meta charset="UTF-8"” /> 
<title>El Palau de la Musica</title> 
<link rel="stylesheet" 

href="style.css" /> 

</head> 

<body> 

<articley> 
<h1>E1 Palau de la Musica</h1> 


<img SITC= img/palau.jpg” width= 250- 
» height="163" alt="El Palau de la Musica /> 


<img src="img/tickets.jpg” width="87" 
> height="163" alt="The Ticket Window /> 


<p>I love the <span lang="es">Palau de la 
» Musica</span>. It is ornate and gaudy 
"and everything that was wonderful 
» about modernism. It's also the home 
' of the <span lang="es">0rfeo Catala 
> </span>, where I learned the benefits 
个 of Moscatell.</p> 
</article> 
</body> 
</html> 


8.2.2 ”1ink 元 素 位 于 HTML 文档 的 head 部 分 。 
页 面 可 以 包含 一 个 以 上 的 link 元 素 ， 但 使 用 它 的 
次 数 最 好 尽 可 能 地 少 ， 让 页 面 得 以 更 快 地 加 载 








链接 到 外 部 样式 表 的 步 又 

(1) 在 每 个 希望 使 用 样式 表 的 HTML 页 面 
的 head 部分, 输入 <link rel="stylesheet"。 

(2) 输入 一 个 空格 ， 然 后 输入 href="wzl. 
css" ,其 中 wrl.css 是 CSS 样 式 表 的 位 置 和 名 称 。 

(3) 输入 一 个 空格 和 />。 (也 可 以 不 输入 
空格 ， 下 接 输 入 >。 这 两 种 形式 都 是 HIML5 
所 人 允许 的 ， 它 们 的 效果 也 完全 一 样 。 ) 
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对 外 部 样式 表 进 行 修改 时 ， 所 有 引 
用 它 的 页 面 也 会 自动 更 新 (参见 图 8.2.3 和 
图 8.2.4 ) 。 这 是 外 部 样式 表 的 神奇 力量 ! 


各 辣 总 [下 
El PR di hs Mlle 


El Palau de la Nisica 


i Pr 


T lowve the Palau de la Miislea, Tt ls omaie and gaudy and i 
hat was Wornderiul aboui Term ls 到 | the home of the 
Cied Carald, where | learmed the benefits of Moscanll, 





8.2.3 将 这 个 样式 规则 (4 像素 宽 的 红色 实 线 
边框 ) 应 用 于 每 个 img 元 素 


There ae fields arad flolds of sunilmwers, thar num with the passing 
wt whe son. 





8.2.4 其 他 文档 也 可 以 链接 到 同一 个 样式 表 ， 
并 拥有 同样 的 样式 


外 部 样式 表 的 另 一 个 好 处 是 ， 一 旦 浏 
pe ni ， 在 随后 浏览 引用 


它 的 页 面 时 ， 通 常 无 需 再 向 Web 服务 器 请 求 
该 文件 。 浏 览 器 会 将 它 保存 到 缓存 里 ， 也 就 
是 保存 到 用 户 的 计算 机 里 ， 并 使 用 这 个 版 本 
的 文件 ,这 样 做 可 以 加 快 对 页 面 的 加 载 ,不 过 ， 
不 必 担 心 。 如 果 随 后 对 样式 表 作 了 修改 ， 再 
将 它 传 到 Web 服务 器 ， 浏 览 器 就 会 下 载 更 新 
后 的 文件 ， 而 不 是 使 用 缓存 的 文件 (从 技术 


上 讲 也 有 例外 ， 但 通常 不 会 遇 到 这 种 情况 ) 。 
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出 于 简化 的 目的 ， 这 个 例子 中 的 链 


接 假 定 HTML 页面 与 style.css 位 于 同一 个 目 
录 (参见 图 8.2.2) 。 不 过 ， 实 践 中 最 好 将 样 
式 表 组 织 在 子 文 件 夹 里 ， 而 不 是 与 HIML 页 
面 混在 一 起 。 常 见 的 样式 表 文 件 夹 名 称 包 括 
css、Styles 等 ， 你 也 可 以 按照 自己 的 意愿 对 
其 进行 命名 ， 只 要 你 认为 该 名 称 放 在 链接 的 
href 值 里 是 合适 的 。 例 如 ， 如 果 style.css 位 
于 名 为 css 的 文件 来 里 ， 而 HTML 位 于 该 文 
件 夹 的 上 一 级 ( 参见 图 8.2.5 ) ， 那 么 1ink 元 
素 就 应 该 写作 图 8.2.6 中 那样 。 


Folder 
Foalder 


647 bytes HTML Document 


Size Dme 


171 bytes 

机 | palau.jpg 23 KB 

亏 | suUnflowers.jpg 16 KB 

图 tickets.jpg 4 KB 

辆 example,html 647 bytes 


JPEG image 
JPEG image 
JPEG image 
HTML Docurment 








8.2.5 ”这 些 截图 显示 了 组 织 网 站 文件 的 津 见方 
式 。 第 一 个 图 是 文件 组 织 结构 的 马 梧 图 ， 接 下 来 是 
将 所 有 文件 夹 展开 后 的 视图 





<head> 
<meta charset="UTF-8” /> 
<title>El] Palau de la Musicax</title> 


<link rel="stylesheet" 
» href= css/style.css /> 
</head> 


8.2.6 ”由 于 style.css 位 于 名 为 css 的 子 文件 夹 中 ， 
因此 example.html 中 指 癌 样式 表 的 路 径 应 做 相应 的 
修改 











外 部 样式 表 里 的 URL 是 相对 于 服务 
器 上 该 样式 表 文 件 的 位 置 的 ， 而 不 是 相对 于 
HTML 页 面 的 位 置 的 。 你 将 在 10.10 节 学 习 
CSS 背景 图 像 时 看 到 有 关 的 实例 。 


可 以 在 页 面 中 使 用 多 个 link 元 素 ， 
从 而 加 载 多 个 样式 表 文 件 。 如 果 在 不 同 的 文 
件 中 有 显示 声明 产生 冲突 ， 则 后 面 文 件 中 的 
规则 的 优先 级 更 高 。 


外 部 样式 表 中 的 规则 可 能 被 HTML 
文档 内 的 样式 尾 盖 。8.5 节 中 总 结 了 以 不 同方 
式 应 用 样式 的 相对 影响 力 。 


可 以 通过 设置 media 属性 将 样式 表 限 
制 在 特定 类 型 的 输出 上 , 详细 信息 参见 8.6 节 。 


HTML 早期 版 本 要 求 在 link 元素 定 
义 中 包 侈 type="text/css"， 但 HTMLS 不 要 
求 这 样 做 ， 因 此 可 以 像 代 码 示 倒 那 样 忽 略 它 。 


8.3 ”创建 舱 入 样式 表 


和 通信 样式 表 是 在 页 面 中 应 用 CSS 的 第 二 
种 方式 。 我 们 在 HTML 页 面 的 head 部 分 创建 
一 个 style 元 系 ， 其 中 包含 了 我 们 的 样式 表 ， 
如 图 8.3.1 所 未 。 由 于 这 些 样式 只 在 一 个 网 页 
里 存在 ， 因 此 不 会 像 外 部 样式 表 中 的 规则 那 
样 应 用 到 其 他 的 页 面 ， 同时， 缓存 的 好 处 也 
不 存在 了 。 如 上 文 所 述 ， 对 于 大 多 数 情况 ， 
我 们 推荐 使 用 外 部 样式 表 ，, 但 理解 其 他 的 选 
择 以 备 不 时 之 需 也 是 很 重要 的 。 
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<!IDOCTYPE html> 
<html Jang= en > 
<head> 
<meta charset="UTF-8"” /> 
<title>El Palau de la Musica</title> 
<style> 
img { 
border: 4px solid red; 


</style> 
</head> 
<body> 
<article> 
<h1>E1 Palau de la Musica</h1> 


<img src="img/palau.jpg” width="250" 
» height="163" alt="E] Palau de la 
» Musica” /> 


<img src="img/tickets.jpg” width="87" 
> height="163" alt="The Ticket Window /> 


《<p>I love the «<span lang="es">Palau de 
la Musica</span>. It is ornate and 
» gaudy and everything that was 
* wonderful about modernism. It's also 
» the home of the «<span lang= es >0Tfe0 
» Catala </span>, where I learned the 
>» benefits of Moscatell.</p> 
</article> 
</body> 
</html> 








8.3.1 使 用 舰 和 人 样式 表 时 ，style 元 素 及 其 包围 
的 样式 规则 通 稼 位 于 文档 的 head 部 分 。 浏 览 融 对 
页 面 的 呈现 方式 与 使 用 外 部 样式 表 时 是 一 样 的 ， 参 
见 图 8.3.2 





创建 艇 入 样式 表 的 步 又 

(1) 在 HTML 文 档 的 head 部 分 输入 
<style>。, 

(2) 根据 需要 , 定义 任意 数量 的 样式 规则 ， 
有 必要 的 话 添加 适量 CSS 注释 (参见 7.1 节 
和 7.2 节 ) 。 

(3) 输入 </style> 结束 移入 样式 表 (参见 
图 8.3.1 ) 。 
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HA El Palau de la Misica 
El Palau de la Musica 








El Palau de la Msica 


Ilove the Palau de la Mtsica. It is ornate and gaudy and everything 
that was wonderful about modernism. Its also the home of the 
Orfe6G Catala, where I learned the benefits of Moscatell. 





图 8.3.2 结果 与 链接 到 外 部 样式 表 完 全 一 样 。 区 
别 在 于 ， 其 他 网 页 无 法 利用 这 个 页 面 中 定义 的 样式 








当 且 仅 当 style 元 素 出 现在 link 元 素 
后 面 的 时 候 ， 误 入 样式 表 中 的 样式 才 会 履 盖 
外 部 样式 表 中 的 样式 。 详 细 信息 参见 8.5 节 。 


说 入 样式 表 是 为 页 面 添加 CSS 的 次 选 
方式 。 ( 也 有 例外 的 情况 ， 如 特定 条 件 下 拥 


有 极 大 流量 的 网 站 。 ) 


HTML5 之 前 的 版 本 要 求 在 style 开 
始 标 签 中 包含 属性 type="text/css"， 不 过 
HTMLS 没有 要 求 。 因 此 你 可 以 省 略 ， 本 书 的 
示例 代码 中 就 都 没有 写 。 


8.4 ”应 用 内 联 样式 


内 联 样 式 是 在 HTML 中 应 用 CSS 的 第 三 
种 方式 。 不 过 ， 应 当 最 后 考虑 这 种 方式 ， 
为 它 将 内 容 (HTML ) 和 表现 (CSS ) 混在 了 
一 起 ,严重 地 违 育 了 最 佳 实践 ,如 网 8.4.1 所 示 。 
内 联 样式 只 影响 一 个 元 泰 ， 如 图 8.4.2 所 示 ， 
因此 使 用 它 将 失去 外 部 样式 表 的 关键 好 处 : 
一 次 编写 ， 到 处 可 见 。 设 想 要 对 大 量 HTML 
做 简单 的 文字 颜色 的 改变 ， 就 需要 对 这 些 页 
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面 逐 一 进行 检查 和 修改 ， 这 也 是 大 家 不 会 经 
党 使 用 内 联 样 式 的 原因 。 

不 过 ， 如 采 你 想 快 速 地 测试 菜 种 样式 ， 
以 便 随 后 将 它 从 HTML 中 搬 到 更 易于 长 期 维 
护 的 外 部 样式 表 中 ( 假定 你 对 结 来 满意 ) ， 
内 联 样式 就 能 派 上 用 场 了 。 


<!DOCTYPE html> 
<html lang="en'"> 
<head> 
<meta charset="UTF-8" /> 
<title>El Palau de la Musica</title> 
</head> 
<body> 


<img STC= img/palau.jpg” width="250" 
height="163" alt="El Palau de la Musica" 
style="border: 4px solid red" /> 


<img src="img/tickets.jpg” width="87" 
‘height="163" alt="The Ticket Nindow /> 


</body> 
</html> 


8.4.1 内 联 样 式 规则 只 影响 单个 元 素 (在 本 例 
中 为 第 一 个 img 元 聚 ) 


S@AA El Palau de la Misica 





El Palau de la Musica 


FP 


El Palau de la Misica 


I love the Palau de la Miisica. It is ornate and gaudy and everything 
that Was wonderful about modernisin. Its also the home of the 
Orfe6 Catala, where I learned the benefits of Moscatel]. 





图 8.4.2 只 有 第 一 个 图 像 拥 有 边框 。 如 果 要 让 其 
他 元 系 也 有 这 种 效果 ， 就 要 在 每 个 img 元 系 中 单 
独 加 上 style="border: 4px solid red"。 如 你 所 
见 ， 内 联 样式 的 效率 很 低 ， 对 全 站 的 内 联 样式 统一 
进行 更 新 是 一 件 很 头疼 的 事 。 更 好 的 做 法 请 参见 
图 8.4.3 和 图 8.4.4 














<body> 


<img STC= img/palau.jpg” width="250" 
height="163" alt="E] Palau de la Musica" 
class="frame™ /> 


<img src="img/tickets.jpg” width="87" 
height="163" alt="The Ticket Window” /> 


</body> 
</htm]> 





图 8.4.3 ”这 是 实现 图 8.4.2 所 示 效 果 的 一 种 较 好 的 
方法 。 为 第 一 个 img 添加 一 个 类 名 ， 而 不 是 添加 一 
个 内 联 样 式 。 然 后 ， 在 外 部 样式 表 中 为 该 类 创建 一 
条 规则 ( 如 图 8.4.4 所 示 ) 。 如 果 你 希望 其 他 的 元 
素 拥 有 这 种 样式 ， 只 需要 为 其 添加 class="frame" 
即 可 。 用 任何 类 名 都 行 ，frame 只 是 一 个 例子 








frame { 


border: 4px solid Ted; 





} 


图 8.4.4 ”通过 使 用 类 选择 器 ， 这 条 规则 可 以 为 任 
何在 HTML 中 拥有 class="frame" 的 元 素 (不仅 是 
img ) 添加 红色 的 边框 。 将 它 包含 在 外 部 样式 表 中 ， 
这 样 就 可 以 很 方便 地 在 全 站 应 用 这 种 样式 。 下 一 章 
将 介绍 选择 器 的 相关 知识 


应 用 内 联 样式 的 步骤 

(1) 在 希望 进行 格式 化 的 HTML 元 系 的 开 
始 标签 中 ， 输 入 style=" (或 者 直接 在 img 等 
虚 元 素 的 标签 内 输入 ， 虚 元 素 不 需要 结束 标 
签 ) 。 

(2) 创建 一 个 样式 规则 ， 但 不 要 包含 花 括 
号 和 选择 器 。 不 需要 选择 器 是 因为 直接 将 样 
式 放 入 目标 元 素 中 了 。 如 果 你 的 样式 规则 包 
含 多 条 声明 ， 使 用 分 扎 将 不 同 的 声明 隅 开 。 

(3) 输入 后 引号 "。 


人 呈 注意 ， 不 要 混淆 等 号 与 冒号 。 由 于 它 
们 都 表示 赋值 ， 因 而 很 容易 不 小 心 用 错 。 
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于 和 不 要 忘记 用 直 引 号 包围 样式 定义 ， 以 
用 分 号 分 隔 多 条 属性 定义 。 


消 


六 


内 联 样 式 的 优先 级 高 于 其 他 所 有 样 
式 ， 除 非 其 他 地 方 与 之 冲突 的 样式 标记 了 
limportant (参见 8.5 节 )。 

如 果 要 在 内 联 样式 声明 中 指定 字体 
(参见 第 10 章 ), 对 于 有 多 个 单词 的 字体 名 称 ， 
要 用 单 引 号 包围 ， 以 避免 与 style 元 素 的 双 引 
号 发 生 冲 突 。 不 能 在 这 两 个 地 方 使 用 相同 类 
型 的 引号 。 


或 许 内 联 样式 最 为 常见 的 使 用 场景 是 
在 JavaScript 函数 中 为 元 素 应 用 内 联 样 式 ， 从 而 
为 页 面 某 个 部 分 添加 动态 行为 。 当 你 关注 页 面 
来 源 的 时 候 可 能 会 注意 到 这 些 生成 的 内 联 样式 ， 
如 Firebug 或 Chrome 的 开发 者 工具 。 在 大 多 数 
情况 下 ， 应 用 这 些 样 式 的 JavaScript 同 HTML 
是 分 离 的 ， 因 而 仍然 保持 了 内 容 (HTML ) 、 

表现 (CSS ) 和 行为 (JavaScript ) 分 离 的 原则 。 


8.5 ”样式 的 层 色 和 顺序 


将 多 个 样式 规则 应 用 于 同一 元 素 的 情况 
并 不 少见 ， 大 型 网 站 更 是 如 此 ， 他 们 需要 更 
多 精力 维护 CSS。 有 时 候 这 些 规则 针对 的 是 
同一 条 属性 。 正 如 7.4 节 中 提 到 的 ， 在 规则 的 
特殊 性 相同 的 情况 下 ， 样 式 的 顺序 就 成 为 关 
键 。 基 本 规则 是 : 在 其 他 条 件 相 同 的 情况 下 ， 
越 晚 出 现 的 样式 优先 级 越 高 ( 参见 图 8.5.1 至 
图 8.5.5 ) 。 以 下 几 条 解释 了 顺序 如 何 诀 定 样 
式 规 则 的 优先 级 。 
口 般 入 样式 表 (位 于 style 元 系 内 ) 与 任 
何 链接 的 外 部 样式 表 之 间 的 关系 取决 于 
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它们 在 HIML 中 的 相对 位 置 。 在 两 者 发 
生 冲 突 时 ， 如 果 link 元 素 在 HIML 代 
码 中 出 现 得 早 (图 8.5.2) ，style 元 系 
网 会 履 兰 链接 的 样式 表 ( 图 8.5.3 ) ; 如 
果 link 元 素 出 现 得 晚 ( 图 8.54) ， 其 
中 的 样式 及 其 包含 的 任何 导入 样式 表 就 
会 覆盖 style 元 泰 的 规则 ( 图 8.5.5 ) 。 

口 内 联 样式 (实际 上 直接 应 用 于 元 系 ) 
在 外 部 样式 表 和 租 信 样式 表 之 后 。 由 
于 顺序 最 靠 后 ， 其 优先 级 是 最 高 的 。 
一 旦 应 用 到 任何 地 方 ， 都 会 覆盖 与 之 
冲突 的 其 他 样式 。 

口 关于 相互 冲突 的 样式 的 顺序 对 优先 级 
的 影响 ， 有 一 种 例外 情况 ， 就 是 标记 
!important 的 样式 总 是 具有 最 高 的 优 
先 级 ， 无 论 它 出 现在 最 前 、 最 后 ， 还 
是 中 间 。 例 如 ，p { margin-top: 1enm 
limportant;j }。 不 过 ， 要 尽量 避 倪 这 
种 用 法 ,极端 情 况 除 外 。 几 平 在 全 部 
情况 下 ， 使 用 选择 右 都 能 达到 同样 的 
效果 。 此 外 ，!important 让 声明 变 得 
太 强 ， 如 果 要 禾 盖 这 样 的 样式 ， 就 不 
得 不 借助 于 更 长 的 规则 。 



































img { 
border: 4px solid red; 
} 


米 


上 面 是 对 以 下 编写 方法 的 简化 : 


img { 
border-width: 4px; 
border-style: solid; 
border-color: Ted; 





8.5.1 这 是 我 们 熟悉 的 外 部 样式 表 的 例子 
style.css， 是 从 前 面 搬 过 来 的 
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<head> 
<title>El] Palau de la Musicax</title> 


<link rel="stylesheet" href="style. 
css" /> 


<style> 
img { 
border-style: dashed; 


} 
</style> 
</head> 


8.5.2 ”在 这 个 例子 中 , 通信 样式 表 出 现在 最 后 ， 
因此 , 它 的 样式 的 优先 级 高 于 style.css 里 的 样式 ( 如 
果 冲 突 的 样式 规则 具有 相同 的 继承 性 和 特殊 性 的 
话 ) 。 山 入 样式 表 会 窗 盖 style.css 中 的 边框 样式 ， 
将 实 线 改 为 虚线 ， 但 不 会 影响 宽度 和 颜色 ( 参见 
图 8.5.3 ) 








@Ae El Palau de la Musica 
El Palau de la Musica 





El Palau de la Miisica 


Ilove the Palau de la Mtsica. It js ornate and gaudy and everything 
that was wonderful about modernism. Its also the home of the 
Orfe6 Catala, where I learned the benefits of Moscatell. 





8.5.3 style 元 素 中 定义 的 虚线 边框 优先 于 
链接 的 style.css 中 定义 的 实 线 边框 ， 不 过 保留 了 
style.css 中 指定 的 边框 宽度 和 颜色 

明白 了 吗 ? 不 过 ， 由 于 你 只 会 使 用 一 个 
外 部 样式 表 ， 且 会 避免 使 用 !important (是 
吧 ) ， 因 此 好 的 一 面 是 ， 你 不 必 担 心 我 在 上 
面 讲解 的 这 些 规则 。 不 过 ， 如 果 你 将 来 看 到 
其 他 人 的 代码 并 不 是 像 你 这 样 编写 的 ， 了 解 
上 述 知 识 就 很 有 和 用。 

对 你 来 说 , 顺 友 规则 有 影响 最 大 的 情形 是 : 
如 果 网 页 包括 一 个 以 上 的 link 元 素 ， 不 同 的 




















外 部 样式 表 中 的 规则 如 有 冲突 ， 后 出 现 的 样 
式 表 中 的 规则 优先 。 


<head> 
<title>El Palau de la Musica</title> 
<style> 
img { 
border-style: dashed; 


} 

</style> 

<link rel="stylesheet" 

> href="style.css" /> 
</head> 





图 8.5.4 这里， 链接 的 样式 表 最 后 出 现 ， 其 优先 
级 高 于 style 元 素 中 的 规则 ( 其 他 情况 都 相同 ) 


S00. 日 Palau de la MUOsica 
El Pala de la MoOsica 





El Palau de la Musica 


T love the Palau de la Misica Tt is omate and paudy and everything 
由 sl Was wonderful about modernism. It's also the home of the 
Orfe6 Catald, where I leamed the benetits of Moscatell, 





8.5.5 ”style.css 样式 表 中 定义 的 实 线 边框 优先 于 
内 部 style 元 素 中 定义 的 虚线 边框 


建议 不 要 使 用 Qimport， 这 主要 是 出 
于 性 能 上 的 考虑 。 如 果 用 了 @import， 当 引入 
的 样式 后 面 有 与 之 冲突 的 样式 ， 则 后 出 现 的 
样式 会 履 盖 这 些 引 入 的 样式 ， 与 预期 一 致 。 


有 一 种 使 用 !important 的 合理 情形 。 
有 时 网 页 会 包含 一 些 你 无 法 修改 的 HTML， 
例如 来 自 第 三 方 服务 的 新 闻 源 。 如 果 这 些 
HTML 中 有 一 些 内 联 样 式 与 你 的 设计 不 符 ， 
你 就 可 以 在 自己 的 样式 表 中 使 用 !important 
覆盖 这 些 样式 。 
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8.6 ”使 用 与 媒体 相关 的 样式 表 


可 以 指定 一 个 只 用 于 特定 输出 的 样式 表 ， 
如 只 用 于 打印 ， 或 只 用 于 在 浏览 需 中 查看 屏 
幕 。 例 如 ， 可 以 创建 一 个 具有 打印 和 屏幕 版 
本 共有 特征 的 通用 样式 表 ， 再 创建 单独 的 打 
印 样式 表 和 屏幕 样式 表 ， 分别 包含 只 用 于 打 
印 的 属性 和 只 用 于 屏幕 显示 的 属性 。 


指定 与 媒体 相关 的 样式 表 的 步骤 

(1) 在 link 或 style 元 素 的 开始 标签 中 
添加 media="output"， 其 中 ovtput 可 以 是 
print、screen 或 all( 尽管 还 有 其 他 一 些 选项 ， 
但 这 些 是 最 常见 的 ) ， 参 见 图 8.6.1。 多 个 值 
之 加 用 逗号 分 隔 。 

(2) 也 可 以 在 样式 表 中 使 用 @media 规则 ， 
参见 图 8.6.2。 这 种 方法 不 需要 在 link 元 素 中 
指定 媒体 类 型 。 


有 9 种 可 能 的 输出 类 型: all、 
aural、 braille、handheld、print、 




















I vo 


projection、screen、tty 和 和 tv。 浏览 器 对 
它们 的 支持 程度 各 不 相同 (大 多 只 有 少量 的 
支持 )。 实 际 上 ， 用 得 上 的 只 有 screen 和 
print (或 许 还 应 加 上 all) ， 浏 览 器 对 它们 
的 支持 情况 都 很 好 。 另 一 方面 (可 以 这 么 说 ) ， 
设备 对 handheld 的 支持 程度 并 不 高 ， 因 此 在 
为 移动 设备 设计 时 ， 通 常 使 用 screen 而 不 是 
handheld (参见 第 12 章 ) 。projection 类 型 
是 为 投影 仪 和 其 他 类 似 的 设备 准备 的 ，Opera 
的 投影 模式 Opera Show 支持 这 种 类 型 。 
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<!DOCTYPE html> 
<html Jang= en > 
<head> 
<meta charset="UTF-8"” /> 
<title>El Palau de la Musica</title> 
<link rel="stylesheet" href="style.css" 
media="screen” /> 
<link rel="stylesheet" href="print.css" 
media="print" /> 
</head> 
<body> 
«article> 
<h1>E1 Palau de la Musica</h1> 


<img STC= img/palau.jpg” width="250" 
height="163" alt="El Palau de la 
Musica /> 


<img src="img/tickets.jpg” width="87" 
height="163" alt="The Ticket Window ” /> 


<p>I love the <span lang="es">Palau de 

la Musica</span>. It is ornate and 
gaudy and everything that was 
wonderful about modernism. It's also 
the home of the <span lang= es >0Tfe0 
Catala</span>, where I learned the 
benefits of Moscatell.</p> 

</article> 

</body> 

</html> 





8.6.1 通过 对 link 元素 添加 media 属性 ， 可 
以 将 样式 表 限 于 特定 输出 。 在 这 个 例子 中 ， 使 用 
浏览 器 查看 页 面 时 ，style.css 会 起 作用 ( 由 于 使 
用 了 media="screen" ) ; 打印 页 面 时 ，print.css 会 
起 作用 (由 于 使 用 了 media="print" ) 。 如 果 第 一 
个 link 元 素 包 含 了 media="all" 的 设置 ， 或 者 没 
有 media 属性 ，style.css 中 的 规则 也 会 应 用 到 打印 
页 面 
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/* 针对 所 有 媒体 的 样式 */ 
img { 

border: 4px solid red; 
} 


p 1 
color: orange; 
font-style: italic; 
) 


/* 打印 样式 表 */ 
@media print { 


body { 
/* 加 大 字号 */ 
font-size: 25pt; 


} 


p 【《 
/* 黑色 的 十 六 进 制 值 */ 


color: #000; 


} 


img { 
/* 不 显示 图 像 */ 
display: none; 





8.6.2 样式 表 中 的 @media 规则 是 指定 其 他 媒体 
类 型 的 男 一 种 方式 (参见 第 12 章 ) 。 在 这 个 例子 
中 , 上面 是 影响 所 有 媒体 类 型 (包括 打印 ) 的 样式 ， 
下 面 是 专门 用 于 打印 的 样式 ， 样 式 规则 放 在 emedia 
print { 了 中。 在 浏览 硕 中 查看 这 个 页 面 ， 殖 果 跟 
本 草 其 他 图 一 样 ， 只 是 文字 是 橙色 和 倾斜 的 。 这 个 
页 面 的 打印 版 如 图 8.6.3 所 示 








联合 使 用 CSS3 引入 的 媒体 查询 和 这 
里 介绍 的 媒体 输出 类 型 可 以 形成 强大 的 威力 。 
通过 这 些 技 术 ， 可 以 根据 输出 设备 的 属性 确 
定 需 要 应 用 到 页 面 的 样式 。 例 如 ， 可 以 让 页 
面 在 较 窜 的 屏幕 ( 如 智能 手机 屏幕 ) 上 呈现 
为 一 种 样式 ， 在 较 宽 的 屏幕 ( 如 笔记 本 屏幕 ) 
上 哇 现 为 另 一 种 样式 。 现 在 ， 设 备 的 种 类 越 
米 越 多 ， 媒 体 查 询 已 经 变 成 代码 编写 人 员 的 
一 种 重要 工具 。 第 12 章 将 向 你 介绍 如 何 构建 
可 以 在 各 种 设备 上 正常 运行 的 网 站 。 关 于 媒 
体 查 询 的 内 容 是 从 12.4 节 开 始 介 绍 的 。 





Bl Palau de la MOsica 


CC A base-styies=-plus-media=print,hrml 一 


El Palau de la Musica 


{ love tie Purlen de lr Muisica, Hi js ornaie 
id amly 








8.6.3 Chrome 浏览 大 的 打印 预 完 功能 可 以 显示 
图 8.6.1 中 页 面 打 印 出 来 的 样子 。 文 本 变 大 了 ,不 
会 显示 图 像 ， 段 落 文 本 是 加 粗 的 斜体 ， 而 不 是 检 色 
的 。font-style: italic 这 条 声明 也 应 用 到 了 打印 
模式 ， 因 为 打印 样式 表 没 有 指定 其 他 的 font-style 





8.7 ”信和 鉴 他 人 的 灵感 


我 们 在 第 2 章 中 学 习 了 如 何 查 看 网 页 的 
源 代 码 。 查 看 他 人 的 CSS 也 不 难 。 


查看 其 他 设计 人 员 的 CSS 代码 

(1) 痛 先 查看 页 面 的 HTML 代码 (如 
图 8.7.1 所 示 ) 。 关 于 查看 HTML 源 代码 的 更 
多 信息 ， 参 见 2.8 市 。 

如 果 CSS 代码 是 其 入 样式 表 ， 就 已 经 能 
看 到 了 。 

(2) 如 果 CSS 是 外 部 样式 表 ， 就 在 HTML 
中 找到 对 它 的 引用 ， 再 点 击 文件 名 (参见 
图 8.7.1 )。 样 式 表 就 显示 在 浏览 需 窗 口中 了 (如 
图 8.7.2 所 示 )。 如 果 愿 意 , 可 以 复制 这 些 代 码 ， 
再 粘贴 到 文本 编辑 需 中 。 
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< DOCTYPPE html> 
<html lang="en'"> 
<head> 
<meta charset="UTF-B" /> 
<title>El Palau de la Misica</title> 


<link rel="stylesheet" href ”St 其 -cas {> 
</head> 


<body> 


<article> 
<hl>Bl Palau de la Misica</hl1> 


<img src="img/palau.jpg" Width="250" height="163" 
alt="E] Palau de la Misica" /> 


<img src="img/tickets.jpg"” width="87" height="163" 
alt="The Ticket Window" /> 


<p>I love the <span lang="es'>Palau de la 


图 8.7.1 查看 包含 你 感 兴趣 的 样式 表 的 HTML 页 
面 源 代码 ， 再 点 击 样式 表 的 文件 名 








{ 
border: 4px solid Ted; 


fx 
That is a shorter way of Writing this: 
img { 

border-width;: 4px; 

border-style: solid; 

border-color: red; 


图 8.7.2 样式 表 显 示 在 浏览 器 窗口 中 ，img 规则 
下 面包 含 了 CSS 注释 ( 因此 确保 注释 整洁 ) 


图 灵 社 区 会 员 
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同 HTML 一 样 ， 可 以 从 其 他 设计 人 
员 的 代码 中 借鉴 灵感 ， 然 后 编写 自己 的 样式 


Ss 不 过 ， 查 看 其 他 人 的 代码 时 也 要 留心 。 
这 些 代 码 放 在 万 维 网 上 并 不 意味 着 它们 就 是 


编写 某 一 效果 的 代码 的 最 佳 方式 (尽管 其 作 
者 布 望 如 此 ) 。 


现代 浏览 器 允许 像 图 中 显示 的 那样 
直接 在 HTML 代码 中 点 击 样 式 表 的 名 称 。 要 
在 旧 的 浏览 器 中 查看 样式 表 ， 可 能 需要 复制 
]ink 元素 中 显示 的 URL， 再 粘贴 到 浏览 器 的 
地 址 栏 (替换 HTML 文 件 名 ) , 然后 按 回 车 键 。 
如 果 样 式 表 的 URL 是 相对 地 址 (参见 1.7 节 )， 
就 需要 将 网 页 的 URL 和 样式 表 的 相对 URL 
结合 在 一 起 ， 形 成 样式 表 的 完整 URL。 


使 用 现代 浏览 器 提供 的 开发 者 工具 ， 
可 以 快速 查看 页 面 的 CSS。 大 多 数 浏览 器 都 
捆绑 了 这 类 工具 。Firefox 中 有 一 个 实现 此 功 
能 的 扩展 ， 名 为 Firebug (参见 第 20 齐 ) 。 
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本 章 内 容 

口 构 造 选 择 需 

口 按 名 称 选 择 元 素 

口 按 类 或 ID 选择 元 素 

口 按 上 下 文选 择 元 素 

口 选择 第 一 个 或 者 最 后 一 个 子 元 素 
口 选择 元 素 的 第 一 个 字母 或 者 第 一 行 
口 按 状 态 选 择 链接 元 素 

口 按 属性 选择 元 素 

口 指定 元 素 组 

口 组 合 使 用 选择 需 





正如 7.1 节 中 看 到 的 ，CSS 样式 规则 有 两 
个 主要 部 分 。 选 择 器 决定 将 格式 化 应 用 到 哪 
些 元 素 ， 而 声明 则 定义 要 应 用 的 格式 化 。 在 
本 革 中 ， 我 们 将 学习 如 何 定 义 CSS 选择 震 。 

最 简单 的 选择 融 可 以 对 给 定 类 型 的 所 有 元 
系 ( 如 所 有 的 h2 标题 ) 进行 样式 化 ， 有 的 选 
择 震 允许 我 们 根据 元 素 的 类 、 上 下 文 、 状 态 等 
来 应 用 格式 化 规则 。 随 春 你 对 本 草 内 容 的 学 习 ， 
你 会 了 解 更 多 类 型 的 选择 需 。 请 记 住 ， 我 们 可 
以 在 一 个 选择 带 中 组 合 使 用 多 个 选择 融 , 例如 ， 
编写 类 选择 占 和 属性 选择 句 的 复合 选择 需 。 

定义 选择 硕 以 后 ， 可 以 根据 第 10 童 ~ 第 
16 章 的 讲解 创建 声明 ( 包括 实际 的 属性 和 值 )。 
在 此 之 前 ， 我 们 将 在 例子 中 使 用 非常 简单 且 
意义 明确 的 {color: red;}。 











9.1 ”构造 选择 器 


选择 絮 决 定 样 式 规则 应 用 于 哪些 元 素 。 
例如 ， 如 果 要 对 所 有 的 p 元 素 添加 Georsgia 字 
体 、12 像素 高 的 格式 ， 就 需要 创建 一 个 只 识 
别 p 元 素 而 不 影响 代码 中 其 他 元 素 的 选择 姨 。 
如 果 要 对 每 个 区 域 中 的 第 一 个 p 设置 特 丈 的 
缩 进 格式 ， 就 需要 创建 一 个 稍微 复杂 一 些 的 
选择 需 ， 它 只 识别 作为 页 面 中 每 个 区 域 的 第 
一 个 元 素 的 p 元 素 。 
选择 需 可 以 定义 五 个 不 同 的 标准 来 选择 
要 进行 格式 化 的 元 素 。 
口 元 系 的 类 型 或 名 称 ， 如 图 9.1.1 所 示 。 
口 元 素 所 在 的 上 下 文 ， 如 图 9.1.2 所 示 。 
口 元 素 的 类 或 ID， 如 图 9.1.3 和 图 9.1.4 
所 示 。 
口 元 素 的 伪 类 或 伪 元 素 ， 如 图 9.1.5 所 示 
(放心 ,我 将 在 后 面 解释 伪 类 和 伪 元 素 )。 
口 元 素 是 否 有 某 些 属 性 和 值 ， 如 网 9.1.6 
所 示 。 
为 了 指出 目标 元 兹 ， 选择 需 可 以 使 用 这 
五 个 标准 的 任意 组 合 。 在 大 多 数 情 况 下 ， 只 
使 用 一 个 或 两 个 标准 即 可 。 另 外 ， 如 果 要 对 
几 组 不 同 的 元 素 应 用 相同 的 样式 规则 ， 可 以 
将 相同 的 声明 同时 应 用 于 几 个 选择 怖 (人 参见 
9.9 记 ) 。 
本 章 其 余部 分 将 详细 解释 如 何 定义 选择 需 。 
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要 选择 的 元 素 的 名 称 
hi { 


color: red,; 


9.1.1 最 简单 的 选择 带 类 型 就 是 要 格式 化 的 元 
素 的 类 型 的 名 称 〈 在 这 个 例子 中 为 hl ) 


下 二 总 
| 和 这 择 的 元 素 的 名 和 


h1i em { 


color: red,; 


图 9.1.2 这 个 选择 带 使 用 上 下 文 。 这 个 样式 只 应 
用 于 hi 元 系 中 的 em 元 素 。 其 他 地 方 的 em 元 素 不 
受 影 啊 


类 
| 
.error { 


color: red,; 


#gaudi { 


color: red,; 


图 9.1.3 第 一 个 选择 兹 选择 所 有 属于 error 类 
的 元 素 。 换 句 话 说 ， 就 是 所 有 在 开始 标签 中 包 
含 class="error" 的 元 素 。 第 二 个 选择 髓 选择 id 
为 gaudi 的 那个 元 素 ， 也 就 是 在 开始 标签 中 指定 
id="gaudi" 的 元 素 。 回 忆 一 下 ,一 个 id 在 每 个 页 
面 中 只 能 出 现 一 次 ， 而 一 个 class 可 以 出 现任 意 次 
数 。 这 是 我 们 推荐 class 选择 器 而 不 推荐 ID 选择 
器 的 主要 原因 ， 你 可 以 针对 尽 可 能 多 的 元 素 重 用 
class 选择 硕 的 样式 




















strong.error { 


color: Ted; 





9.1.4 通过 在 class 或 id 选择 融 前 面 添 加 目标 
元 素 的 名 称 ， 可 以 增强 选择 句 的 特殊 性 。 在 这 个 例 
子 中 ， 第 一 个 选择 器 仅 选择 属于 error 类 的 strong 
元 素 ， 而 不 是 属于 error 类 的 任何 元 素 。 除 非 确 有 
必要 ， 一 般 不 要 使 用 这 种 方法 。 图 9.1.3 中 的 选择 
器 是 更 好 的 方法 ， 因 为 它 比 较 灵 活 





名 称 
| 伪 类 
一 ， 


a:link { 


color: red; 





图 9.1.5 在 这 个 例子 中 ， 选 择 融 选择 属于 link 伪 
类 的 a 元 系 ( 即 页 面 上 还 未 访问 的 链接 ) 


名 称 
| 属性 


1 
a[title] { 


color: red; 


名 称 
| 属性 值 
| 


IE 
a[href="http://www.wikipedia.org"] { 


color: Ted; 





图 9.1.6 可 以 在 选择 融 中 使 用 方 括号 深 加 关 于 目 
慰 元 系 的 属性 或 值 的 信息 ， 第 一 个 例子 针对 的 是 所 
有 具有 title 属性 的 a 元 系 ， 第 二 个 例子 针对 的 只 
是 指向 维基 百科 页 面 的 a 元 系 
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我 们 建议 你 尽量 不 要 使 用 ID 选择 器 ， 
我 会 在 9.3 节 详 细 解 释 原 因 。 


我 们 会 在 9.8 节 了 解 到 ， 选 择 器 不 仅 
限于 针对 一 个 属性 的 确切 值 ， 图 9.1.6 就 是 这 
种 情况 。 


提 or CSS 的 一 个 重要 目标 就 是 让 选择 
器 尺 的 简单 ， 仅 保持 必要 的 特殊 性 。 应 
a 特性 ， 即 元 素 的 后 代 
会 继承 祖先 元 素 的 样式 。 同 时 ， 应 该 将 页 面 
中 的 通用 设计 元 素 挑选 出 来 ， 编 写 一 个 选择 
器 (如 类 名 ) ， 从 而 可 以 在 全 站 不 同 的 元 素 
上 共享 该 样式 。 这 样 , 样式 表 通 常会 变 得 更 小 ， 
ae 随 着 你 构建 页 面 经 验 的 积累 ， 

你 会 越 来 越 深 地 体会 到 这 些 技巧 ， 不 过 现在 
先 提 出 来 ， 有 助 于 日 后 的 理解 。 


《!DOCTYPE html> 
<htm] jang= en > 
<head> 


</head> 
<body> 


«article class="architect"> 
<h1>Antoni Gaudix</h1> 


水 选择 元 素 


选择 要 格式 化 的 元 素 ( 参见 图 9.2.1 ) ， 
最 党 用 的 标准 可 能 是 元 素 的 名 称 (也 就 是 大 
家 平常 说 的 类 型 选择 器 ， 因 为 你 指定 了 应 用 
样式 的 元 素 的 类 型 ) 。 例 如 ， 可 能 要 让 所 有 
的 ht 元素 以 大字 号、 粗 体 显示 ， 让 所 有 的 p 
元 素 以 无 衬 线 字 体 显 示 。 


按照 类 型 选择 要 格式 化 的 元 素 
(1) 输入 selector， 其 中 selector 是 目标 元 


9.2 按 名 和 和 











素 的 类 型 名 称 ( 不 含 任何 属性 ) ， 如 图 9.2.2 
所 示 。 

(2) 输入 {。 

(3) 输入 你 希望 应 用 到 选中 元 素 的 样式 ， 





这 要 用 属性 : rah 我 们 从 下 一 
草 才 开始 讲解 CSS 属性 和 值 。 
(4) 输入 } 结束 样式 规则 。 


<p>Many tourists are drawn to Barcelona to see Antoni Gaudi's incredible architecture.</p> 


<p>Barcelona «a href="http://www.gaudi2002.bcn.es/english/" rel="external">celebrated the 150th 


anniversary</a> of Gaudi's birth in 2002.</p> 


<h2 lang="es">La Casa Mila</h2> 
<p>Gaudi's work was essentially useful. <span lang=' es >La Casa Mila</span> is an apartment 
building and <em>real people</em> live there.</p> 


<h2 lang="es">La Sagrada Familia</h2> 


<p>The complicatedly named and curiously unfinished Expiatory Temple of the Sacred Family is 
the <em>most Visited</em> building in Barcelona.</p> 


</articley> 


图 9.2.1 


这 段 HTML 代码 包含 两 个 h2 元 系 (或 许 你 对 lang 属性 感到 疑惑 。 








它 指明 内 容 使 用 的 是 页 面 默 


认 语 言 以 外 的 另 一 种 语言 。 页 面 默认 语言 是 在 每 页 开头 处 紧 跟 在 DOCTYPE 后 面 的 html 元 素 中 指定 的 。 





在 这 个 例子 中 ， 每 个 hz 上 的 lang="es" 
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示 其 内 容 为 西班牙 请 ) 
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注意 ， 在 本 章 后 面 的 章节 中 ， 上 再 谈 到 构 
造 选 择 融 的 步 又 时 我 不 会 重 述 第 (2) ~ (4) 步 
的 内 容 了 ， 不 过 对 于 创建 完整 的 样式 规则 ， 
这 些 步 又 帮 是 必需 的 。 更 多 信息 请 参见 7.1 市 。 





h2 { 


color: red; 





} 


9.2.2 ”这 个 选择 融会 选择 文档 中 所 有 的 hz 元素 ， 
并 证 它们 显示 为 红色 ， 参 见 图 9.2.3 


Antoni Gaudi - Introduction 


Antoni Gaudi - Introduction 





Antoni Gaudi 


Many tourists are drawn to Barcelona to see 
Antoni Gaudi's incredible architecture. 


Barcelona celebrated the 150th anniversary of 
Gaudi's birth in 2002. 


La Casa Mila 


Gaudi's work was essentially useful. La Casa Mila 
is an apartment building and real people live there. 


La Sagrada Familia 


The complicatedly named and curiously 
unfinished Expiatory Temple of the Sacred Family 
is the most visited building in Barcelona. 











9.2.3 所 有 的 h2 元 素 都 显示 为 红色 


除非 指定 其 他 情况 (使 用 本 章 其 余部 
分 介绍 的 技术 ) ， 指 定 类 型 的 所 有 元 素 都 将 
被 格式 化 ,无 论 它们 出 现在 文档 的 什么 位 置 。 


后 阮 并 非 所 有 的 选择 器 都 需要 指定 元 素 的 
名 称 。 如 果 对 某 一 类 的 元 素 进 行 格式 化 ， 而 
不 管 属 于 这 个 类 的 元 素 的 类 型 ， 就 可 以 从 选 
择 器 中 去 掉 元 素 名 称 。 下 一 节 将 解释 具体 怎 
么 做 。 
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通配符 *( 星 号 ) 匹配 代码 中 的 任 
何 元 素 名 称 。 例 如 ,使 用 * { border: 2px 
solid green; } 会 让 每 个 元 素 都 有 一 个 2 像素 
宽 的 绿色 实 线 边框 ! 因为 匹配 范围 太 广 ， 会 
让 浏览 嚣 加载 页 面 变 慢 ， 因 此 应 该 谨慎 使 用 
通配符 。 实 际 适 合 使 用 通配符 的 情况 比较 少 。 


辆 了 网 可 以 在 一 个 选择 器 中 使 用 一 组 元 素 名 
称 ， 名 称 之 间 用 过 号 分 隔 。 更 多 细节 参见 9.9 
-aA 
To 


9.3” 按 类 或 ID 选择 元 素 


如 果 已 经 在 元 系 中 标识 了 class (参见 
图 9.3.1 ) 或 id (参见 最 后 一 条 提示 ) ， 就 可 
以 在 选择 需 中 使 用 这 个 标准 ， 从 而 只 对 已 标 
识 的 元 素 进 行 格式 化 〈 参 见 图 9.3.2 ) 。 不 过 
推荐 使 用 类 选择 袁 ， 一 会 儿 我 会 解释 理由 。 


1. 按 类 选择 要 格式 化 的 元 素 

(输入 . (点 号 ) 。 

(2) 不 加 空格 ， 下 接 输 入 classname， 这 
里 的 classname 标识 希望 应 用 样式 的 类 。 


2. 按 id 选择 要 格式 化 的 元 素 

(GD) 输 入 #《〈《 井 号 ) 。 

(2) 不 加 空格 ， 直 接 输入 i4， 这 里 的 14 
唯一 标识 和 希望 应 用 样式 的 元 系 。 


可 以 单独 使 用 class 和 id， 也 可 以 同 
其 他 选择 器 标准 混在 一 起 使 用 。 例如，.news 
{ color: red; } 会 影响 所 有 属于 news 类 的 元 
素 ,， 而 hi.news { color: red; } 只 会 影响 届 
于 news 类 的 hi 元 素 。 除 非 必须 特别 针对 目标 
元 素 ， 最 好 不 要 在 id 或 class 选择 器 中 添加 
元 素 名 称 。 
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<article id="gaudi" class="architect"> 
<h1>Antoni Gaudi</h1> 
<p>Many tourists are drawn to Barcelona to see Antoni Gaudi's incredible architecture.</p> 


<p>Barcelona «<a href="http://www.gaudi2002.bcn.es/english/" rel="external">celebrated the 150th 


anniversary</a> of Gaudi's birth in 2002.</p> 


<h2 lang="es">La Casa Mila</h2> 


<p>Gaudi's work was essentially useful. <span lang="es">La Casa Milax</span> ls an apartment 
building and <em>real people</em> live there.</p> 


</article> 


<p>This paragraph doesn't have <code>class="architect"</code>, so it isn't red when the CSS is 


applied.</p> 


<article class="architect"> 
<h1>Lluis Domenech i Montaner</h1> 


<p>Lluis Domenech i Montaner was a contemporary of Gaudi.</p> 


</article> 


9.3.1 


.architect { 
color: red; 


} 


9.3.2 ”这 个 选择 器 会 选择 class 为 architect 的 
元 素 。 在 这 个 例子 中 ， 它 们 都 是 article 元 素 , 不 
过 ， 可 以 将 类 应 用 于 任何 元 素 。 如 果 只 想 对 有 这 个 
类 的 article 元 么 应 用 这 种 样式 ， 可 以 将 选择 右 写 
为 article.architect。 不 过 ， 这 样 做 通常 会 使 特 
殊 性 高 于 你 所 需要 的 程度 





注意 ， 在 图 9.3.1 和 图 9.3.2 中 使 用 了 
表达 内 容 含 义 的 class 名 称 (architect ) ， 
而 不 是 命名 为 red。 尽管 也 有 极端 情况 ， 但 最 
好 避免 创建 描述 事物 如 何 显 示 的 class 名 称 
(一 般 称 为 描述 性 类 名 ) ， 因 为 你 可 能 在 将 
来 改变 样式 (例如 ， 在 本 节 示 例 中 让 文本 显 
示 为 绿色 ) 。 








有 两 个 class 为 architect 的 article 元 系 。 它 们 之 间 还 有 一 个 不 含 class 的 短 段 落 


如 果 要 定位 的 元 素 有 多 个 类 名 ， 可 以 
在 选择 器 中 将 它们 连 在 一 起 ,就 像 .architect . 
bio { color: blue; } 这 样 。 任 何 .architect 
或 .bio 选择 器 的 规则 仍 会 应 用 于 该 元 素 ， 但 
.architect.bio 的 规则 的 特殊 性 更 高 ， 因 此 如 
果 有 样式 冲突 ，.architect.bio 的 规则 的 优先 
级 更 高 。 注意 类 名 之 间 没 有 空格 。 如 果 有 空格 ， 
就 会 针对 任何 architect 类 的 元 素 诅 套 的 bio 
类 元 素 设置 样式 【参见 9.4 节 ) 。 


如 果 图 9.3.2 中 写 的 是 #eaudi { 
color: red; }， 就 只 有 第 一 个 article 的 
文本 会 显示 为 红色 ， 因 为 它 是 唯一 包含 
id="gaudi" 的 元 素 。 每 个 id 都 必须 是 唯一 的 ， 
因此 ， 不 能 在 关于 Llufs Domeanech i Montaner 
的 article 上 再 用 这 个 id。 
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关于 在 HTML 代码 中 为 元 素 指定 类 
的 信息 ， 参 见 3.14 节 。 


Aintoni Gaudi -= Intraduction 


Bntoni Gaudi = Introduction 


Antoni Gaudi 


Many tourists are drawn to Barcelona to see 
Antoni Gaudi's incredible architecture. 


Barcelona celebrated the 150th anniversary of 
Gaudi's birth in 2002. 


La Casa Mila 


Gaudi's work was essentially useful. La Gasa Mi 
is an apartment building and real people live there. 


La Sagrada Familia 


The complicatedly named and curiously 
unfinished Expiatory Temple of the Sacred Family 
is the most visited building in Barcelona. 


This paragraph doesnt have class="architect", 
so it isnt red when the GSS is applied. 


Liuis Domenech i Montaner 


Liuis Doménech i Montaner was a contemporary 
of Gaudi. 





9.3.3 属于 architect 类 的 article 显示 为 红色 ， 
而 两 个 article 元 素 之 间 的 p 元 素 没 有 显示 为 红色 

(或 许 你 对 链接 显示 为 蓝 色 感 到 疑惑 。 链 接 显 示 为 
蓝 色 是 浏览 志 的 默认 样式 ， 可 以 编写 目 己 的 样式 轿 


兰 它 ) 


类 选择 器 与 ID 选择 器 的 比较 
要 在 class 选择 器 和 id 选择 器 之 间作 
出 选择 的 时 候 ， 建 议 尽 可 能 地 使 用 class 选 
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这 主要 是 因为 我 们 可 以 复 用 class 选 
。 有 人 提议 完全 不 使 用 id 选择 器 ， 我 
tt 同 这 种 观点 ， 并 且 在 自己 的 工作 中 始终 遵 
循 这 一 点 ， 但 最 终 的 决定 权 掌 握 在 网 站 开发 
人 员 手 中 。id 选择 器 会 引入 下 面 两 个 问题 。 
口 与 它们 关联 的 样式 不 能 在 其 他 元 素 
2 
dO 
会 导致 在 其 他 元 素 上 重复 样式 ， 而 
不 对 通过 Class 二 率 社民 
口 它们 的 特殊 性 比 class 选择 器 要 强 
得 多 。 这 意味 着 如 果 要 禾 盖 使 用 id 
选择 器 定义 的 样式 ， 就 要 编写 特殊 
性 更 强 的 CSS 规则 。 如 果 数 量 不 多 ， 
可 能 还 不 难 管理 。 如 果 处 理 规模 较 
DO 
所 需 的 更 长 、 更 复杂 。 

随 着 你 处 理 的 CSS 越 来 越 多 ， 你 对 这 
两 点 的 理解 也 会 更 加 清晰 。 ( 另 一 方面 ， 
有 人 吝 欢 使 用 id 选择 器 的 原因 之 一 就 是 使 
用 它们 一 眼 就 能 看 出 元 素 是 唯一 的 。 不 过 ， 
依照 个 人 经 验 ， 这 点 好 处 还 不 足 一 均衡 它 
举 来 的 束 端 。 另 外 ， 万 一 你 哪 天 改变 了 网 
6 /MR WA 人 dt 
GT 

因此 ， 推 荐 的 做 法 是 寻找 能 将 共享 样 
lss I 人 mn 
可 以 对 它们 进行 复 用 ， 同 时 ， 如 果 确 实 要 
使 用 id 选择 器 ， 也 应 该 尽量 少 用 。 这 样 ， 
MR 

需要 说 明 的 是 ，id 选择 器 在 HTML 
中 仍 具 有 重要 的 作用 。 通 过 它们 可 以 在 
页 面 中 定义 锚 ( 参 见 6.2 节 )， 在 编写 
JavaScript 为 特定 的 页 面 元 素 应 用 特殊 行为 
时 它们 尤其 具有 重要 的 价值 (JavaScript 是 
人 


涨 千 签 
可 如 器 
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9.4 ” 按 上 下 文选 择 元 素 


在 CSS 中 ， 可 以 根据 元 素 的 祖先 、 父 元 
素 或 同胞 元 素来 定位 它们 (参见 1.3 市 中 的 “ 父 
元 素 和 子 元 素 ”) ,如 图 9.4.1 ~ 图 9.4.4 所 示 。 





<article class="architect"> 
<h1>Antoni Gaudi</h1> 
<p>Many tourists ... </p> 
<p>Barcelona ... </p> 


<section> 
<h2 jang= es >La Casa Mila</h2> 


<p>Gaudi's work ... </p> 
<«/section> 


<section> 
<h2 lang=' es >La Sagrada Familia</h2> 
<«/section> 
</article> 





9.4.1 这 里 对 article 的 一 部 分 使 用 了 section 
元 系 ， 从 而 可 以 演示 几 代 元 系 的 关系 。 同 时 ， 对 文 
字 内 容 进行 了 压缩 ， 这 样 可 以 更 容 多 看 清 元 素 之 间 
的 关系 。 注 意 ， 在 这 个 代码 片段 中 ， 有 两 个 第 二 
代 p 元素 ， 它 们 由 类 名 为 architect 的 article 直 
接 包 含 ， 男 外 还 有 一 个 第 三 代 p 元 素 ， 位 于 第 一 个 
section ( 包含 在 article 里 ) 。 在 完整 的 代码 中 
还 有 一 个 第 三 代 p 元 素 , 不 过 在 这 里 没有 显示 出 来 。 
这 里 ， 所 有 h2 的 实例 也 是 第 三 代 元 素 

















.architect p { 
color: red; 


lb 





9.4.2 ”这 里 组 合 使 用 了 类 选择 器 和 类 型 选择 器 。 
.architect 和 p 之 间 的 空格 表示 这 个 选择 大 会 寻找 
任何 作为 architect 类 元 素 后 代 〈 无 论 是 第 几 代 ) 
的 p 元 素 。 实 际 效 果 参 见 图 9.4.4， 此 外 ， 图 9.4.3 
提供 了 几 种 实现 同样 效果 的 其 他 方式 


/* 得 到 相同 效果 的 其 他 方式 


/* 是 任意 article 祖 先 的 所 有 p 元 素 ， 
这 是 三 个 中 特殊 性 最 低 的 一 个 */ 
article p { 
color: red; 


} 


/* 属于 architect 类 article 元 素 的 祖先 的 任意 p 元 
闲 ， 必 三 个 中 特殊 性 最 商 的 一 个 9 
article.architect p { 
color: red; 


} 





9.4.3 ”第 一 个 例子 中 的 选择 如 (article p { }) 
比 图 9.4.2 中 的 选择 硕 和 它 后 面 的 选择 各 ( article. 
architect p{ }) 的 特殊 性 都 要 低 。 这 里 演示 的 第 
二 个 例子 比 其 他 两 个 例子 的 特殊 性 都 要 高 ， 不 过 在 
实践 中 ， 在 类 名 ( 尤其 是 有 D 名 ) 之 前 添加 元 素 名 
通常 会 让 特殊 性 比 实际 需要 的 要 高 

祖先 ( ancestor ) 是 包含 目标 元 又 (后代 ， 
descendant ) 的 任何 元 素 ， 不管 它们 之 间隔 
了 多 少 代 。【( 父 元 际 是 直接 包含 另 一 个 元 又 
的 元 系 ， 它 们 之 间 只 隅 一 代 ， 被 包含 的 元 又 
称 为 子 元 素 。 ) 通 稼 对 元 素 的 子 元 素 增 加 缩 
进 ， 从 而 可 以 清晰 地 看 到 它们 之 间 的 关系 ( 如 
图 9.4.2 所 示 ) 。 缩 进 对 页 面 的 显示 没有 任何 
影 啊 。 

要 实现 某 种 效果 ,通常 有 多 种 构建 选择 
人 妖 的 方式 可 供 选 择 。 具 体 取 决 于 你 需要 多 大 
的 特殊 性 (如 图 9.4.3 所 示 ) 。 
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Antoni Gawdi = Introaduction 


Antoni Gaudi = Intreduction 


Antoni Gaudi 


Many tourists are drawn to Barcelona to see 
Antoni Gaudi's incredible architecture. 


Barcelona celebrated the 150th anniversary of 
Gaudi's birth in 2002. 


La Casa Mila 


Gaudi's work Was essentially useful. La Casa Milé 
is an apartment building and real people live there. 


La Sagrada Familia 


The complicatedly named and curiously 
unfinished Expiatory Temple of the Sacred Family 
is the most visited building in Barcelona. 








9.4.4 所 有 包含 在 属于 architect 类 的 元 取 里 
的 p 元 系 都 是 红色 的 ， 即 使 它们 同时 也 包含 在 其 他 
属于 architect 类 的 元 素 。 图 9.4.2 和 图 9.4.3 中 每 
条 样式 规则 的 结果 都 显示 在 这 里 


1. 按 祖先 元 素 选 择 要 格式 化 的 元 素 

(1) 输入 ancestor， 这 里 的 ancestor 是 希 
望 格式 化 的 元 素 的 祖先 元 系 的 选择 需 。 

(2) 输入 一 个 空格 〈 必 不 可 少 ) 。 

(3) 如 果 需 要 ， 对 后 续 的 每 个 祖先 元 素 重 
复 第 (1) 步 和 第 (2) 步 。 

(4) 输入 descendant， 这 里 的 descendant 
是 布 望 格式 化 的 元 素 的 选择 硕 。 


我 们 通常 将 基于 元 素 祖先 的 选择 器 称 
为 后 代 选 择 器 ， 不 过 CSS3 将 其 重新 命名 为 后 
代 结 合 符 。 ( 有 些 人 仍然 使 用 “选择 器 ”这 
一 名 称 。 ) 
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不 要 对 图 9.4.3 中 的 article.architect 
部 分 感到 疑惑 。 记 住 这 只 表示 “class 等 
于 architect 的 article”。 此 article. 
architect p 表 示 “ 包 含 在 class 等 于 
architect 的 article 元 素 里 的 任何 p 元 素 ”， 
相 比 之 下 ， 特 殊 性 低 一 些 的 .architect p 表 
示 “ 和 包含 在 class 等 于 architect 的 任意 元 素 
里 的 所 有 日 元 素 ”， 参 见 图 9.4.3。 


2. 按 父 元 素 选 择 要 格式 化 的 元 素 

上 面 的 例子 展示 了 后 代 结 合 符 。CSS 也 
有 子 结 合 符 ， 从 而 可 以 为 父 元 素 的 直接 后 代 
( 即 子 元 素 ) 定义 样式 规则 。 在 CSS3 之 前 ， 
它们 称 为 子 选择 器 。 

(1) 输入 parent， 这 里 的 parent 是 直接 
包含 待 格式 化 元 素 的 元 素 的 选择 需 。 

(2) 输 入 >( 大 于 号 ) ， 参见 图 9.4.5。 

(3) 如 果 需 要 ， 对 后 续 每 代 父 元 素 重 复 第 
(1) 步 和 第 (2) 步 。 

(4) 输入 cp77d， 这 里 的 cpz7d 是 要 格式 
化 的 元 素 的 选择 需 。 














.architect > p { 


color: red; 


} 





9.4.5 ”这 个 选择 右 仪 选择 architect 类 元 素 的 
TR (MT 
包含 于 任何 其 他 元 素 的 p 元 素 均 不 会 被 选中 ， 实 现 
参见 图 9.4.6 
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Antoni Gawdi = lntroduction 


Antoni Gaudi = Introduction 


Antoni Gaudi 


Many tourists are drawn to Barcelona to see 
Antoni Gaudi's incredible architecture: 


Barcelona celebrated the 150th anniversary of 
Gaudi's birth in 2002. 


La Casa Mila 


Gaudi's work was essentially useful. La Casa Mila& 
is an apartment building and real People live there. 


La Sagrada Familia 


The complicatedly named and curiously 
unfinished Expiatory Temple of the Sacred Family 
is the most visited building in Barcelona. 





9.4.6 ”只 有 头 两 个 p 元 素 是 architect 类 元 素 
的 子 元 素 。 另 两 个 p 元 素 是 article 里 section 
元 素 的 子 元 系 。 这 个 例子 使 用 的 HTML 代码 见 
图 9.4.1 





6 正如 你 在 后 代 结 合 符 中 看 到 的 ， 可 以 
忽略 class 前 面 的 元 素 名 称 。 例 如， 在 上 面 的 
例子 中 使 用 article.architect > p { color: 
red; | 上} 会 产生 同样 的 效果 ， 但 这 个 选择 器 的 
特殊 性 更 高 。 要 想 比 以 上 两 种 方法 的 特殊 性 
更 低 (图 9.4.5 就 是 个 例子 ) ， 应 该 忽略 整个 
类 别 ， 就 像 图 9.4.5 中 的 article > p{ color: 
red; }。 本 章 剩 余部 分 的 一 些 例子 也 可 以 按 类 
似 的 方式 进行 简化 。 你 已 经 了 解 了 如 何 进 行 
简化 ， 因 此 不 必 再 一 一 列举 这 些 替 代 方 案 ， 
但 应 记 住 ， 通 常 最 好 保持 较 低 的 特殊 性 ， 让 
样式 更 易于 复 用 。 


也 可 以 在 子 结合 符 中 使 用 id 选择 器 ， 
但 推荐 尽量 使 用 特殊 性 更 低 的 选择 器 ( 如 类 
选择 器 ) 。 


学 习 本 章 内 容 同 时 可 参考 1.3 节 中 的 
公元 二 和 子 元 订 ”。 


3. 按 相 邻 同胞 元 素 选 择 要 格式 化 的 元 素 
下 面 继续 讲 我 们 的 “家 族 ” 主 题 。 同 胞 
(Csibling ) 元 素 是 拥有 同一 父 元 每 的 任何 类 型 
的 子 元 系 。 相 邻 同 胞 元 素 ( adjacent sibling ) 
是 直接 相互 毗邻 的 元 系 ， 即 它们 之 间 没 有 其 

他 的 同胞 元 素 。 在 下 面 这 个 简略 的 例子 中 ， 
hi 和 p 是 相 邻 同胞 元 素 ，p 和 h2 是 相 邻 同胞 
元 素 , 而 hi 和 h2 则 不 是 相 邻 同胞 元 素 。 不 过 ， 
它们 都 是 同胞 元 素 ( 也 是 body 元 系 的 子 元素 )。 








<body> 


hy IT 
区 
<n2>。。 .</h2> 
</body> 
</html> 


CSS 相 邻 同 胞 结合 和 从 (adjacent sibling 
combinator ) 可 以 选择 直接 跟 在 指定 的 同胞 元 
素 后 面 的 同胞 元 素 ， 如 图 9.4.7 和 图 9.4.8 所 
示 。 关 于 CSS3 中 新 出 现 的 普通 同胞 结合 符 

( general sibling combinator ) ， 参 见 最 后 一 条 
A 

(1) 输入 sibling， 这 里 的 sibling 是 包含 
在 同一 父 元 素 中 的 、 直 接 出 现在 目标 元 素 前 
面 的 元 素 的 选择 融 。 (它们 不 必 是 同一 种 元 
素 类 型 ， 只 要 它们 彼此 直接 相 邻 就 行 。 ) 

(2) 输入 + (加 号 )。 
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(3) 如 有 需要 ， 对 每 个 后 续 的 同胞 元 素 重 
复 第 (1) 步 和 第 (2) 步 。 

(4) 输入 element， 这 里 的 element 是 要 格 
式 化 的 元 素 的 选择 天 。 


.architect p+p { 


color: red; 


} 


9.4.7 相 邻 同胞 结合 符 只 选择 直接 跟 在 同胞 p 
元 素 之 后 的 元 素 





Antoni Gaudi 


Many tourists are drawn to Barcelona to see 
Antoni Gaudi's incredible architecture. 


Barcelona celebrated the 150th anniversary of 
Gaudi's birth in 2002. 


La Casa Mila 


Gaudi's work was essentially useful. La Gasa Mila 


9.4.8 ”只 有 下 接 跟 在 同胞 p 元 素 后 面 的 p 元 系 
显示 为 红色 。 如 果 后 面 还 有 第 三 个 、 第 四 个 以 及 更 
多 的 段落 ， 它 们 也 将 显示 为 红色 。 例 如 ， 如 果 要 对 
除 第 一 个 段落 以 外 的 所 有 段落 进行 缩 进 ， 相 邻 同 胞 
结合 从 就 很 有 用 








我 们 也 可 能 会 用 到 普通 同胞 结合 符 ， 
通过 它 可 以 选择 那些 并 非 直 接 出 现在 另 一 同 
胞 元 素 后 面 的 同胞 元 素 。 它 与 相 邻 同胞 结合 
符 的 唯一 区 别 是 使 用 ~ (波浪 号 ) 代替 + 分 
隔 同胞 元 素 。 例 如 ，h1 ~ h2 { color: red; } 
会 让 任何 属于 同一 父 元 素 的 同胞 hi 后 面 的 h2 
元 素 显 示 为 红色 (它们 可 以 直接 相 邻 ， 也 可 
尺 不 直接 相 邻 ) 。 
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9.5 ”选择 第 一 个 或 最 后 一 个 子 
元 素 


上 一 节 解 释 了 如 何 选择 作为 另 一 个 元 素 
的 子 元 素 的 元 素 , 举 的 例子 是 .architect > p， 
选择 所 有 作为 architect 类 元 素 的 子 元 素 的 段 
沙 。 不 过 ， 有 时 需要 选择 仅 作 为 某 元 系 第 一 
个 或 最 后 一 个 子 元 素 的 元 素 。 这 时 ， 就 要 用 
到 :first-child 和 :1ast-child 伪 类 (前 者 
参见 图 9.5.1 ~ 图 9.5.3， 后 者 参见 图 9.5.1、 
图 9.5.4 和 图 9.5.5 ) 。 




















<p>A partial list of Gaudi's projects 
follows:</p> 


<Ul> 
<]1 lang="es'">La Casa Mila</1i> 
<]1 lang="es'">La Sagrada Familia</1i> 
<li>College of the Teresians <span lang= 
"es">(Colegio Teresiano)</span></1i> 
<1i>Park Guell</1i> 
</ul> 





9.5.1 我 们 将 在 第 15 章 讲 解 列 表 ， 不 过 在 这 
里 你 只 需要 知道 ， 这 是 一 个 无 序列 表 (ul ) ， 每 个 
列表 项 目 (1i ) 都 是 其 子 元 素 。 这 是 使 用 :first- 
child 和 :last-child 规定 样式 的 常见 情形 ， 不 过 
通常 是 用 于 添加 一 个 边框 ， 而 不 是 简单 地 改变 一 下 
文字 颜色 














li:first-child { 
color: red; 


} 








9.5.2 ”这 个 选择 天 会 选择 作为 父 元 素 的 第 一 个 
子 元 系 的 li 元素 


图 灵 社 区 会 员 wenshanjun 专 享 尊重 版 权 


A partial list of Gaudi's projects follows: 


es La Casa Mila 

* La Sagrada Familia 

ea College of the Teresians (Colegio Teresiano) 
" Park GUell 





9.5.3 因为 第 一 个 二 元 素 是 岂 元 素 的 第 一 个 
于 元 素 ， 所 以 显示 为 红色 。 缩 进 和 项 目 符号 是 训 览 
人 船 针 对 无 序列 表 的 移 认 样式 


li:last-child { 
color: red; 


' 





图 9.5.4 这 个 选择 角 只 选择 作为 父 元 素 的 最 后 一 
个 子 元 系 的 li 元 系 


A partial list of Gaudi's projects follows: 


» La Casa MI 二 


= La Sagrada Familia 
se College of the Teresians (Colegio Teresiano) 
" Park GUell 








955 
红色 


这 种 情况 下 只 有 最 后 一 个 li 元素 显 示 为 


有 的 人 在 一 开始 没有 真正 弄 清 楚 这 些 
伪 类 的 工作 原理 。 他 们 以 为 1i:first-child 
这 样 的 选择 器 会 选择 li 元素 的 第 一 个 子 元 
亲 ， 而 li:last-child 会 选择 li 元 末 的 最 后 
一 个 子 元 系 。 如 采 是 这 样 的 话 ，“(Colegio 
Teresiano)” 在 两 个 例子 中 就 都 是 红色 的 ( 参 
见 图 9.5.3 和 图 9.5.5 ) ， 因 为 它们 所 在 的 span 
既是 某 个 1i 的 第 一 个 元 素 ， 也 是 其 最 后 一 个 
元 素 ( 参见 图 9.5.1 ) 。 实 际 情况 是 ， 这 些 伪 
类 选择 的 是 作为 第 一 个 子 元 素 或 最 后 一 个 子 
元 素 的 元 素 ( 在 这 个 例子 中 就 是 1i ) 。 





























选择 菏 元 素 的 第 一 个 长 最 后 一 个 子 元 素 
进行 格式 化 

(1) 这 一 步 可 选 ， 输 入 代表 我 们 想 应 用 
样式 的 第 一 个 或 者 最 后 一 个 子 元 素 (如 p 或 
.news ) ， 参 见 最 后 一 条 提示 。 接 下 来 干 万 不 
要 有 空格 。 

(2) 如 条 选择 的 是 第 一 个 子 元 素 就 输入 
:first-child (参见 图 9.5.2) ， 如 果 选 择 的 
是 最 后 一 个 子 元 素 ， 就 输入 :last-child ( 参 
见 图 9.5.4 ) 。 


6 在 下 一 节 的 补充 材料 中 我 们 会 更 详细 
地 探讨 伪 类 。 











:last-child 伪 类 被 添加 至 CSS 的 时 
间 要 晚 于 :first-child。 因 此 ，IE9 之 前 的 
Internet Explorer 并 不 支持 :last-child。 好 
在 通常 你 可 以 绕 过 这 一 限制 ， 因 为 IE8 及 之 
后 的 版 本 都 支持 :first-child。 这 里 介绍 一 
种 常见 的 场景 (其 中 提 到 的 外 边 距 在 第 11 章 
才 会 讲 到 ) 。 假 设 你 希望 每 个 li 的 下 边 都 有 
20 像素 的 外 边 距 ， 但 最 后 一 个 11 除外。 你 可 
以 设置 li { margin-bottom: 0; margin-top: 
20pX; }， 让 每 个 列表 项 目 都 拥有 20 像素 的 上 
外 边 距 ， 没有 下 外 边 距 。 然 后 使 用 1i:first- 
child { margin-top: 0; } 取消 第 一 个 元 素 的 
上 外 边 距 。 这 相当 于 反 过 来 编写 代码 ， 但 可 
以 达到 完全 一 样 的 效果 。 


在 伪 类 之 前 添加 其 他 选择 器 可 以 使 
其 特殊 性 更 高 。 例 如 .architect h1:first- 
child { color: red; } 仅 对 作为 architect 
类 元 素 的 第 一 个 子 元 素 的 h1 应 用 样式 。 
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入 


司 尽管 第 (1) 步 中 指定 选择 符 这 一 做 法 
是 很 常见 的 ， 但 这 并 非 必 需 。 例如， 仅仅 使 
用 :first-child { color: red; }， 可 以 为 任 
何 作为 另 一 个 元 素 的 第 一 个 子 元 率 的 元 素 应 
用 样式 。 在 图 9.5.1 所 示 的 例子 中 ， 这 样 做 会 
让 段落 (body 的 第 一 个 子 元 素 )、 第 一 个 1i( ul 
的 第 一 个 子 元 素 ) 和 “(Colegio Teresiano)”( 它 
所 在 的 span 是 一 个 li 的 第 一 个 元 素 ) 变 成 
红色 。 


9.6 选择 元 素 的 第 一 个 字母 或 
者 第 一 行 

我 们 可 以 分 别 使 用 :first-letter 和 

:first-line 伪 元 系 只 选择 元 素 的 第 一 个 字母 

(参见 图 9.6.1、 图 9.6.2 和 图 9.6.3 ) 或 第 一 行 ( 参 

见 图 9.6.1、 图 9.6.4 和 图 9.6.5 ) 。 





<article class="architect"> 
<h1i>Antoni Gaudi</h1> 
<p>Many tourists are drawn to Barcelona 
> to see Antoni Gaudi's incredible 
» architecture.</p> 
<p>Barcelona «a href="http:// 
» WWW.gaudi2002.bcn.es/english/" 
» rel="external">celebrated the 150th 
» anniversary</a> of Gaudi's birth in 
» 2002.</p> 


<h2 lang="es'">La Casa Milax</h2> 
<p>Gaudi's work was essentially 
-Useful..</DS 


</articley> 





9.6.1 很 容易 判断 :first-letter 定位 的 第 一 
个 字母 ,但 :first-line 会 影响 哪些 单词 只 有 在 浏 
览 器 里 查看 页 面 ， 看 到 内 容 的 排 布 情况 时 才能 知道 
(如 图 9.6.5 所 示 ) 。HTML 本 身 无 法 定义 单词 位 
于 哪 一 行 
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p:first-letter { 
color: red; 
font-size: 1.4em; /* make letter 


» larger */ 
font-weight: bold; 





9.6.2 下 面 的 选择 硕 只 选择 每 个 p 元 素 的 第 一 
个 字母 


全 与 自 
Antoni Gaudi - Introduction 


Antoni Gaudi = Introduction 





Antoni Gaudi 


Many tourists are drawn to Barcelona to see 
Antoni Gaudi's incredible architecture. 


Barcelona celebrated the 150th anniversary of 
Gaudi's birth in 2002. 


La Casa Mila 





Gaudi's work was essentially useful. La Casa Mila 


9.6.3 ”first-letter 选择 器 可 用 来 实现 每 段 首 
字母 大 写 的 效果 


p:first-line { 
color: red; 





图 9.6.4 下面 的 选择 器 只 选择 每 个 p 元 素 的 第 一 行 


Amion4 Cevdi -Inirodwc hen L* 


Antoni Gaudi Antoni Gaudi 
Many 4ourists are drawn to 
Barceiona to 566 Amipnm Gaudis 
Incred 蕊 lo archiliecture. 


Many ourais are drawn to Barcelona to gaa Antoni 
Gaudi's ineredible archilegture. 


Berceiona colebrated the 150th 
anniyersary of Gaudis birth in 
2002. 


Barcelona celetwated the 150h anniversary of Gaudl'e 
biih mm 2008. 


La Casa Mila La Casa Mila 


Gaudly work wes esasntially ugeful. La Casn Bah is an 
apartment bullding and res! padae Ivea theare. 


La Sagrada Familia 


GaudFs work was essonfially 
useful. La Casa MilB is an 
apartment byllding amd real 
People ive thare, 


La Sagrada Familia 


The complioatedly reamed and 
curiously undinished Expiatory 
Temple of the Sacred Family is 
the most visiteg biding n 
Barceliona. 


The compbcatadly named ered curipusly Unfiniahed 
Expiatory Tample of tha Sacred Family is the moal 
Vimod bullding In Bareolona. 








图 9.6.5 ”调整 浏览 器 窗口 会 改变 每 段 第 一 行 的 具 
体内 容 ， 但 选择 器 选中 的 始终 是 第 一 行 
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1. 选择 元 素 的 第 一 个 字母 

(1) 输入 element， 这 里 的 element 是 要 对 
其 第 一 个 字母 进行 格式 化 的 元 系 的 选择 人 带 

(2) 输入 :first-letter 以 选择 第 站 步 
中 引用 的 元 素 的 第 一 个 字母 。 








2. 选择 元 素 的 第 一 行 

(1) 输入 element， 这 里 的 element 是 要 对 
其 第 一 行进 行 格 式 化 的 元 素 的 选择 善 

(2) 输入 :first-line 以 选择 第 (1) 步 中 
引用 的 元 素 的 第 一 行 。 


可 以 将 :first-letter 和 :first- 
line 伪 元 素 与 比 这 个 例子 中 的 选择 器 更 复杂 








6 只 有 某 些 特定 的 CSS 属性 可 以 应 用 于 
:first-letter 伪 元 素 ， 包 括 font、 
background、 text-decoration、vertical- 
align ( 只 要 :first-letter 不 是 浮动 的 ) 、 

line-height.、 


CoOlLor 、 


teXxt-transform、 margin.、 


padding、border、float 和 clear。 我 们 将 在 


11 章 讲 到 这 些 属 性 。 


大 大 


第 10 章 和 第 


第 一 个 字母 前 面 的 标点 符号 ( 如 引号 ) 
会 被 当做 第 一 个 字母 的 一 部 分 ， 一 同 被 格式 
化 。 现 代 浏 览 器 都 支持 这 一 特性 ， 但 IE8 之 
前 的 版 本 并 不 是 这 样 做 的 ， 它 将 标点 符号 本 


身 当 做 第 一 个 字母 。 
的 选择 器 结合 使 用 。 例如， 如 果 要 选择 包含 
在 project 类 元 素 中 的 每 个 段落 的 第 一 个 字 
母 ， 可 以 使 用 .project p:first-letter。 
伪 元 素 、 伪 类 及 CSS3 语法 
在 CSS3 中 ，:first-line 的 语法 为 ':first-line，:first-letter 的 语法 为 ::first- 
letter。 注 意 ， 它 们 用 两 个 冒号 代替 了 单个 冒号 。 这 样 修 改 的 目 0 (me. 
de ‘first eline :Tirst- -letter :before A :after ) 与 1/ 食 类 ( de first=child、 


:link、:hover 等 ) 区 分 开 


伪 元 素 ( pseudo-element ) 是 HTML 中 并 不 存在 的 元 素 。 例 如 ， 
Te 


fj 文字 时 ， 并 未 在 HTML 中 作 相 应 的 标记 。 
I 
ME 
类 标记 它们 。 例 如 ， 
class="first-child", 
未 米 ，::first-line 和 : 
XC 


原始 的 单 冒 号 语法 则 被 废弃 了 ， 但 这 


As 


伪 类 (pseudo-class ) 则 应 用 于 一 组 HTML 元 素 ， 而 你 无 需 在 HIML 代码 中 用 
使 用 :first-child 可 以 选择 某 元 素 的 第 
更 多 关于 伪 类 的 内 容 ， 
:first-letter 这 样 的 双 冒 号 语法 是 推荐 的 方式 ， 现 代 浏 览 器 也 
I 览 器 出 于 向 后 兼容 的 目的 ， 仍然 支持 它们 。 


A i A 


请 参见 下 一 节 。 


不 过 ,IE9 之 前 的 Internet Explorer 版 本 均 不 支持 双 冒 号 。 因 此 ,你 可 以 选择 继续 使 用 单 冒 


号 语法 ， 


conditionalcomments ) 。 
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除非 你 为 IE8 及 以 下 版 本 设置 了 单独 的 CSS (参见 http://reference.sitepoint.com/css/ 
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9.7” 按 状态 选择 链接 元 素 


CSS 允许 根据 链接 的 当前 状态 对 它们 进 
行 格式 化 ， 参 见 图 9.7.1。 链 接 的 状态 包括 访 
问 者 是 否 将 鼠标 保留 在 链接 上 ， 链 接 是 否 被 
访问 过 ， 等 等 。 可 以 通过 一 系列 伪 类 实现 这 
= 





<p>Many tourists are drawn to Barcelona 
to see Antoni Gaudi's incredible 
architecture.</p> 


<p>Barcelona <a href="http://www. 
gaudi2002.bcn.es/english/"> 
celebrated</a> the 150th anniversary 
of Gaudi's birth in 2002.</p> 


9.7.1 无 法 在 代码 中 指定 链接 的 状态 。 链 接 的 
状态 是 由 访问 者 控制 的 。 伪 类 让 你 可 以 获取 链接 的 
状态 ， 以 改变 链接 在 该 状态 下 显示 的 效果 





按 状态 选择 要 格式 化 的 链接 元 素 的 步骤 
(1) 输入 a (a 是 链接 元 素 的 名 称 ) 。 
(2) 输入 : (冒号) ， 前 后 都 没有 空格 。 
(3) 完成 第 O) 步 以 后 ， 执 行 下 列 操作 之 一 以 
表明 你 希望 影响 的 链接 状态 ( 参见 图 9.7.2 ) : 
口 输入 link 以 设置 从 未 被 激活 或 指向 ， 
当前 也 没有 被 激活 或 指向 的 链接 的 外 
观 (如 图 9.7.3 所 示 ) ; 
口 输入 visited 以 设置 访问 者 已 激活 过 
的 链接 的 外 观 ( 如 图 9.7.4 所 示 ) ; 
口 输入 focus ， 前 提 是 链接 是 通过 键盘 选 
择 并 已 准备 好 激活 的 ， 如 图 9.7.5 所 示 
(注意 : 如 果 链 接 处 于 活跃 状态 也 会 
获得 焦点 ) ; 
口 输入 hover 以 设置 光标 指 问 链接 时 链 
接 的 外 观 (如 图 9.7.6 所 示 ) ; 
口 输入 active 以 设置 激活 过 的 链接 的 外 
观 (如 图 9.7.7 所 示 ) 。 











9.7 按 状 态 


a:link { 
color: red; 


} 


a:visited { 
color: orange; 


} 


a:focus { 
color: purple; 


} 


a:hover { 
color: green; 


} 


a:active { 
color: blue; 


} 
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9.7.2 ”应 该 始终 按照 这 种 顺序 定义 链接 的 样式 ， 
以 避免 链接 处 于 多 种 状态 〈 如 已 访问 和 鼠标 停留 ) 


时 罗 关 属性 


Barcelona celebrated 1 


Gaudi's birth in 2002. 


Barcelona celebrated 
Gaudi's birth in 2002. 


Barcelona 二 | 
Gaudi's birth i 2 





区 二 
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图 9.7.3 新 的 、 未 访 
问 的 链接 显示 为 红色 。 
男 见 彩 插 


9.7.4 访问 过 的 链 
接 变 为 橙色 。 专 见 彩 搬 


图 9.7.5 链接 获得 焦 
点 (如 通过 Tab 键 ) 时 
显示 为 紫色 。 男 见 彩 插 


图 9.7.6 ” 当 访 问 者 将 
鼠标 指针 停留 在 链接 上 
时 ， 它 显示 为 绿色 。 另 
见 彩 插 





Barcelona celebrated 1 





Gaudfs birth if 型 002. 9.7.7 ” 当 访 问 者 激 
活 链 接 时 , 它 变 为 蓝 色 。 
HE 男 见 彩 插 


要 对 链接 指定 样式 ， 不 一 定 要 指定 伪 
类 (因此 第 (2) 步 和 第 (3) 步 都 是 可 选 的 步骤 ) 。 
例如 ,使 用 a { color: red; } 会 让 链接 的 所 
有 状态 显示 为 同一 种 样式 。 不 过 ， 最 好 使 用 伪 类 


区 分 不 同 状 态 的 样式 ,这 样 做 可 以 方便 访问 者 。 


6 也 可 以 对 其 他 类 型 的 元 素 使 用 
:active 和 :hover 伪 类 。 例如 ,设置 p:hover 
{ color: red; } 以 后 ， 和 鼠标 停留 在 任何 段 
落 上 段落 都 会 显示 为 红色 。 


由 于 链接 可 能 同时 处 于 多 种 状态 (如 
同时 处 于 激活 和 鼠标 停留 状态 ) ， 且 晚 出 现 的 
规则 会 覆盖 前 面 出 现 的 规则 ， 所 以 ， 一 定 要 
按照 下 面 的 顺序 定义 规则 : link、visited、 
focus 、hover 、active ( 缩写 为 LVFHA ) 。 
一 种 助 记 口诀 为 “Lord Vaders Former Handle 
Anakin”( 达 斯 ， 维 达 的 原名 叫 安 纳 金 ) 。 
有 人 提议 使 用 LVHFA 的 顺序 , 这 也 是 可 行 的 。 


触 屏 设备 ( 如 智能 手机 和 平板 电脑 ) 
的 浏览 器 没有 采 面 浏览 器 所 具有 的 “和 泉 标 吓 
襄 ”( 即 hover) 状态 。 这 是 因为 ， 像 iPad 这 
样 的 设备 无 法 判断 手指 停留 在 一 个 链接 上 的 
时 刻 ， 只 能 判断 手指 轻 触 该 链接 以 激活 它 的 
时 刻 。 不 过 ， 在 iPhone 和 iPad 上 ， 访 问 者 激 
活 链接 时 ， 确 实 会 显示 通过 :hove 指定 的 样 
式 。 其 他 设备 的 行为 则 不 一 而 定 。 


9.8 按 属性 选择 元 素 
可 以 对 具有 给 定 属性 或 属性 值 的 元 素 进 








行 格 式 化 ， 参 见 图 9.8.1。CSS 提供 了 多 种 方 
式 匹 配属 性 和 属性 值 ， 包 括 只 检查 属性 名 ， 
检查 全 部 或 者 部 分 属性 值 ( 更 多 信息 请 参见 
表 9.8.1 ) 。 如 果 在 选择 天 中 忽略 属性 值 ( 参 
见 图 9.8.2 ) ， 就 可 以 为 具有 给 定 属性 的 元 素 
应 用 样式 ， 而 不 管 具体 的 属性 值 是 什么 ( 参 
见 图 9.8.3 ) 。 














«article class="architect"> 
<h1i>Antoni Gaudix</h1> 


<p class="intro">Many tourists are 
drawn to Barcelona to see Antoni 
Gaudi's incredible architecture.</p> 


<p>Barcelona «<a href="http://www. 
gaudi2002.bcn.es/english/" rel= 
"external">celebrated the 150th 
anniversary</a> of Gaudi's birth 
in 2002.</p> 


<h2 lang= es >La Casa Milax</h2> 

<P class="highlight">Gaudi's work was 
essentially useful. <span lang= es >La 
Casa Milax</span> is an apartment 
building and <em>real people</em> live 
there.</p> 


<h2 lang= es >La Sagrada Familia</h2> 
<p>The complicatedly named and curiously 
unfinished Expiatory Temple of the 
Sacred Family is the <em>most visited 
</em> building in Barcelona.</p> 
</article> 


9.8.1 
class 属性 


出 于 读 示 目的 ， 我 为 两 个 段落 都 添加 了 


plclass] { 
color: red; 


} 
9.8.2 方 括号 包围 目标 属性 和 目标 属性 值 。 这 

















个 例子 中 没有 属性 值 ， 它 选择 的 是 所 有 具有 class 
属性 的 段落 
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全 与 自 Antoni Gaudi - Introduction 


LAntoniGaudi - Introduction 





Antoni Gaudi 


Many tourists are drawn to Barcelona to see 
Antoni Gaudi's incredible architecture: 


Barcelona celebrated the 150th anniversary of 
Gaudf's birth in 2002. 


La Casa Mila 


Gaudi's work was essentially useful. La Casa Mila 
is an apartment building and real people live there， 


La Sagrada Familia 


The complicatedly named and curiously 
unfinished Expiatory Temple of the Sacred Family 
is the most visited building in Barcelona. 





9.8.3 每 个 包含 class 属性 的 p 元 素 (无 论 
其 class 值 是 什么 ) 都 显示 为 红色 。 如 果 选 择 
器 是 plclass="intro"]， 只 有 第 一 个 段落 会 显 
示 为 红色 。 如 采 选 择 器 是 p[class^="intro"]， 
则 第 一 个 段落 以 及 class="introduction"” 和 
class="introductory" 的 段落 也 显示 为 红色 


按 属 性 选择 要 格式 化 的 元 素 
(1) 输入 element， 这 里 的 element 是 要 考 
察 其 属性 的 元 素 的 选择 器 。 
(2) 输入 attribute， 这 里 的 attribute 是 
选择 元 素 需要 考察 的 属性 的 名 称 。 
(3) 以 下 步 又 可 选 ， 根 据 需 要 输入 : 
口 输入 ="vayue"， 表 示 属 性 值 等 于 这 里 
的 valve 的 元 系 将 被 选中 。 
口 输入 ~="valwue"， 表 示 属 性 值 包含 这 里 
表 9.8.1 














选 择 器 
[attributel] 
[attribute="value"] 完全 匹配 指定 属性 值 
[attribute~="value" 
[attribute|="value 
[ 
[attribute$="value 
[ 


] 

"] 
attribute^="value" | 
可 

中 
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的 Valvwe 的 元 系 将 被 选中 (属性 值 还 
可 以 包含 其 他 内 容 ， 不同 的 属性 值 之 
间 用 空格 分 隔 ) 。 它 必须 匹配 完整 的 
单词 ， 而 不 是 单词 的 一 部 分 。 

口 输入 |="valve" (前 面 是 管道 符号 ， 
而 不 是 数字 1 或 小 写字 母 1) ， 表 示 
属性 值 等 于 这 里 的 valwe 或 以 vayue- 
开头 的 元 系 将 被 选中 。 不 要 输入 连 字 
符 ， 浏 览 硕 知道 搜索 连 字 符 (这 和 和 
用 以 搜索 包含 lang 属性 的 元 素 ， 如 在 
HTML 中 ，[lang|="en"] 会 同时 匹配 
lang="en" 和 1]ang="en-US" )， 

口 输入 ^="value"， 表 明 属 性 值 以 这 里 的 
value 开头 〈 作 为 完整 的 单词 ， 或 单 
词 的 一 部 分 ) 的 元 素 将 被 选中 (这 是 
CSS3 中 新 增 的 特性 , 参见 本 市 提示 ) 。 

口 输入 $="valwve"， 表 明 属 性 值 以 这 里 的 
value 结尾 ( 作为 完整 的 单词 ， 或 单 
词 的 一 部 分 ) 的 元 素 将 被 选中 (这 是 
CSS3 中 新 增 的 特性 , 参见 本 市 提示 ) 。 

口 输入 *="valve"， 表 明 属 性 值 至 少 包含 
这 里 的 valvwe 一 次 的 元 系 将 被 选中 。 
也 就 是 说 ，valve 不 必 是 属性 值 中 的 完 
整 单词 (这 是 CSS3 中 新 增 的 特性 ， 
参见 本 证 提示 ) 。 

(4) 输入 ]。 如 果 你 想 为 元 素 指 定 其 他 属 

性 或 者 属性 但， 可 重复 第 (2) ~ (4) 步 。 




















属性 选择 器 参考 表 


属 性 值 


匹配 指定 属性 ， 不 论 具体 值 是 什么 


属性 值 是 以 空格 分 隔 的 多 个 单词 ， 其 中 有 一 个 完全 匹配 指定 值 
属性 值 以 value- 打头 

属性 值 以 value 开头 ，value 为 完整 的 单词 或 单词 的 一 部 分 
属性 值 以 value 结尾 ，value 为 完整 的 单词 或 单词 的 一 部 分 








attribute*="value 





属性 值 为 指定 值 的 子 字 符 品 
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及 





6 当前 所 有 主流 浏览 器 均 支 持 按 元 素 包含 的 属性 (和 属性 值 ) 选择 元 素 。 对 于 第 (3) 步 
中 提 到 的 CSS3 中 新 增 的 属性 选择 器 ，IE7 和 IE8 有 一 些 剧 常 。 更 多 信息 参见 http://reference. 


sitepoint.com/css/css3attributeselectors, 


更 多 属性 选择 器 示例 


属性 选择 器 看 起 来 都 长 得 差不多 (参见 表 9.8.1 ) ， 但 是 它们 使 用 起 来 非常 灵活 ， 可 以 以 
多 种 方式 匹配 元 素 的 属性 及 其 值 ,这 里 给 出 更 多 的 例子 ,演示 属性 选择 器 几 种 不 同 的 使 用 方式 。 
这 些 例子 在 实践 中 也 用 得 上 
口 这 个 选择 器 选择 任何 rel 属性 值 等 于 external ( 必须 完全 匹配 ) 的 3a 元素。 对 任何 链 
接 到 站 外 页 面 的 a 元 素 ( 即 外 部 链接 ) 添加 rel="external" 是 非常 好 的 习惯 。 使 用 下 
面 的 样式 规则 ， 可 为 外 部 链接 添加 独特 的 样式 ， 从 而 告诉 访问 者 点 击 该 链接 将 离开 你 
的 网 站 。 
a[rel="external"] { 
color: red; 
} 
口 假设 某 article 元 素 有 两 个 类 ， 如 《article class=" Pe ole barcelona">， 另 一 
个 article 有 一 个 类 ， 如 xarticle class="barcelona">。 “= 语法 可 以 测试 单词 的 
部 分 匹配 ， 即 区 配 以 空 = 格 相隔 的 多 个 单词 中 的 一 个 。 在 这 个 例子 中 ， 两 个 元 和 素 都 将 显 
示 为 红色 。 
article[class~="barcelona"] { 


color: red; 


} 


/* 这 个 选择 器 也 能 匹配 ， 因 为 这 个 选择 器 匹配 部 分 字符 囊 ( 不 需要 完整 的 单词 ) */ 
articlef[class*="barc"] { 


color: red; 


} 


/* 这 个 选择 器 无 法 匹配 ， 因 为 barc 并 不 是 空格 分 隔 的 单词 列表 中 的 某 个 完整 的 单词 */ 
article[class~="barc"] { 


color: red; 


} 
口 这 个 选择 器 选择 任何 带 有 lang 属性 且 属 性 值 以 es 开头 的 h2 (如 es-ES 和 es-PE， 
前 者 代表 西班牙 西班牙 语 ， 后 者 代表 秘鲁 西班牙 语 ) 。 在 HIML 代码 示例 (参见 
图 9.8.1 ) 中 有 两 个 这 样 的 实例 。 
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h2[lang|="es"] { 
color: red; 
} 
口 通过 使 用 通用 选择 器 ， 这 个 选择 器 选择 任何 带 有 lang 属性 且 属 性 值 以 es 开头 的 元 素 。 


在 HTML 代码 示例 (参见 图 9.8.1 ) 中 有 三 个 这 样 的 实例 。 


*[lang|="es"] { 
color: red; 
} 
串通 过 联合 使 用 多 种 方法 ， 这 个 选 树 器 选择 所 有 了 既 有 任意 href 局 性 ， 又 有 任意 局 性 值 
包含 单词 howdy 的 title 属性 的 a 元 素 。 


a[href][title~="howdy"] { 
color: red; 


} 
ee 这 个 选择 器 选择 所 有 上 既 有 任意 href 属性 ， 
又 有 任意 属性 值 包 含 how (作为 完整 的 单词 或 单词 的 一 部 分 ， 它 匹配 how、howdy、 
show 等 ， 无 论 how 在 属性 值 的 什么 位 置 ) 的 title 属性 的 a 元 素 。 


a[href][title*="how"] { 
color: red; 


一 


这 个 选择 器 匹配 任何 href 属性 值 以 http:// 开头 的 a 元 素 。 


a[href^="http://"] { 
color: orange; 


一 





这 个 选择 需 匹 配 任 何 src 属性 值 完 全 等 于 logo.png 的 img 元 素 。 


img[src="logo.png"] { 
border: 1px solid green; 


} 
口 这 个 选择 器 的 精确 度 比 前 一 个 低 一 些 , 它 匹 配 任 何 src 属性 值 以 .png 结尾 的 img 元 素 。 


img[src$=".png"] { 
border: 1px solid green; 


} 
只 用 上 面 这 些 例子 很 难 全 面 概括 使 用 选择 器 能 够 实现 的 效果 ， 不 过 ,和 硕 望 它们 可 以 激发 
你 继续 探索 。 
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9.9 指定 元 素 组 


我 们 经 党 需要 将 相同 的 样式 规则 应 用 于 
多 个 元 素 。 可 以 为 每 个 元 篆 重 复 地 设置 样式 
规则 ， 也 可 以 组 合 选择 需 ， 一 次 性 地 设置 样 
式 规则 (人 参见 图 9.9.1 至 图 9.9.3 ) 。 当 然 ， 后 
一 种 方法 效率 更 高 ， 通 常 也 会 让 样式 表 更 易 
于 维护 。 











<article class="architect"> 
<h1>Antoni Gaudi</h1> 
<p>Many tourists are drawn ...</p> 
<p>Barcelona ...</p> 


<h2 lang="es">La Casa Mila</h2> 
<p>Gaudi's work Was ...</p> 


<h2 lang="es">La Sagrada Familia</h2> 
<p>The complicatedly named ...</p> 
</article> 


9.9.1 这 段 代 人 码 包 含 一 个 hl 和 两 个 h2 


h1， 
h2 { 
color: red; 


9.9.2 可 以 列 出 任意 数量 的 单独 的 选择 前 〈 无 





论 它 们 包含 的 是 元 素 名 称 、 类 还 是 伪 元 素 ) ， 只 需 
用 逗号 分 隅 它们 即 可 





将 样式 应 用 于 元 素 组 的 步 又 

(1) 输入 selector1， 这 里 的 selector1l 是 
受 样式 规则 影响 的 第 一 个 元 又 的 名 称 。 

(2) 输入， (逗号 )。 

(3) 输入 selector2， 这 里 的 selector? 是 
受 样 式 规则 影响 的 下 一 个 元 又 的 名 称 。 

(4) 对 其 他 每 个 元 素 重 复 第 (2) 步 和 第 
(3) 步 。 














antoni Gawdi = Introduction 


Anioni Gaudi = Introduction 


Antoni Gaudi 


Many tourists are drawn to Barcelona to see 
Antoni Gaudis incredible architecture. 


Barcelona celebrated the 150th anniversary of 
Gaudi's birth in 2002. 


La Casa Mila 


Gaudi's work Was essentially useful. La Casa Mi 
is an apartment building and real people live there. 


La Sagrada Familia 


The complicatedly named and curiously 
unfinished Expiatory Temple of the Sacred Family 
is the most visited building in Barcelona. 





9.9.3 通过 同一 条 样式 规则 ， 可 以 让 hi 和 h2 
元 隶 都 显示 为 红色 








ES 通过 元 素 组 添加 样式 只 是 一 种 简写 方 
式 。 图 9.9.2 中 的 规则 跟 h1 { color: red; } 
和 h2 { color: red; } 这 两 个 规则 的 效果 


完全 一 样 。 
可 以 组 合 使 用 任何 类 型 的 选择 器 ， 从 


最 简单 的 ( 如 图 9.9.2 所 示 ) 到 最 复杂 的 都 可 
以 。 例 如 ， 可 以 使 用 h2，.project p:first- 
letter 来 选择 二 级 标题 以 及 包含 在 class 等 于 
project 的 所 有 元 素 中 的 p 元 素 的 第 一 个 字母 。 


不 同 的 选择 器 不 一 定 非得 单独 成 行 
(图 9.9.2 采 用 的 就 是 这 种 做 法 ) ， 但 很 多 编 
码 人 员 都 遵循 这 种 惯例 ， 易 于 阅读 | 
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有 时 ， 为 应 用 于 多 个 选择 器 的 共同 样 
式 创建 一 个 样式 规则 ， 再 为 没有 共同 点 的 样式 
分 别 创建 单独 的 样式 规则 是 很 有 用 的 。 要 记 住 ， 

在 样式 表 中 后 指定 的 规则 会 覆盖 先 指定 的 规则 。 


9.10 组 合 使 用 选择 器 


本 草 的 示例 都 尽量 保持 简单 ， 以 便 你 全 面 
了 解 各 种 类 型 的 选择 器 。 不 过 ， 现 实 中 常 第 需 
要 组 合 使 用 这 些 技术 ， 才 能 找到 要 格式 化 的 元 
系 ， 但 这 也 是 选择 需 的 功能 蝇 大 之 所 在 。 

图 9.10.1( 实现 结果 见 图 9.10.2 ) 通过 一 
个 极端 的 例子 展示 了 如 何 组 合 使 用 选择 需 ， 
不 过 此 处 我 们 不 推荐 采用 这 种 方法 。 这 里 展 
示 了 可 实现 相同 效果 的 几 种 方式 ， 它 们 是 按 
特殊 性 由 低 回 高 排列 的 。 


em { 
color: Ted ; 


} 


.project em { 
color: red; 


} 


.architect .project em { 
color: red; 


} 

没有 必要 摘 一 大 堆 吓 中 人 的 选择 天 来 
实现 网 页 中 的 大 部 分 设计 ， 不管 这 些 设计 在 
浏览 絮 中 看 起 来 多 么 错综复杂 。 只 在 必要 情 
况 下 组 合 使 用 选择 器 ， 并 有 旦 ， 最 好 将 特殊 性 
控制 在 刚好 需要 的 程度 。 例 如 ， 如 果 你 只 想 
选择 包含 在 class="project" 的 元 素 内 的 em 
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元 素 ， 可 以 使 用 .project em { color: 
redj }。 尽 管 在 HTML 中 em 元 素 是 般 僚 在 
p 元 素 中 的 ， 但 没有 必要 写成 .project p em 
{ color: red; }， 除 非 你 不 想 为 段 沙 以 外 的 
em 元 系 应 用 该 样式 。 总 之 , 从 最 简单 的 开始 ， 
按 需 增加 特殊 性 。 


.project h2[lang|="es"] + P em { 


color: red; 





} 


9.10.1 这 对 你 来 说 可 能 是 个 挑战 。 从 右 向 左 看 ， 
它 表 明 “ 仅 选择 em 元 素 ， 它 们 包含 在 p 元 素 中 ， 
这 样 的 p 元素 是 lang 属性 值 以 es 开头 的 h2 元 素 
的 直接 相 邻 同胞 元 兹 ， 且 是 class 等 于 project 的 
任何 元 素 的 子 元 素 ”。 弄 明白 了 吗 ? 实际 上 ， 很 
少 需要 编写 这 么 复杂 的 选择 器 ， 但 至 少 这 样 做 是 
可 行 的 











1 anronicaudi = Introduction 
(augrs DI ID aUUe, 


La Casa Mila 


Antoni Gaudi = Introdwcbtian 


Gaudis work Was essentially useful. La GCasa Mila 
is an apartment building and real people live there. 


La Sagrada Familia 


The complicatedly named and curiously 
unfinished Expiatory Temple of the Sacred Family 
is the most visited building in Barcelona. 





9.10.2 图 9.10.1 中 所 有 那些 东西 只 是 让 en 
元 素 显 示 为 红色 吗 ? 如 果 你 认为 简单 地 写成 .em 
{ color: red; } 或 者 .architect em { color: 
red; } 要 好 得 多 ( 也 更 易于 维护 ) ,你 肯定 是 对 的 。 
除非 需要 更 高 的 特殊 性 ， 否 则 越 徐 单 越 好 
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更 多 CSS3 选择 器 

CSS3 为 你 的 工具 箱 增加 了 不 少 新 的 选择 器 。 你 已 经 在 本 章 中 见 到 了 其 中 的 一 些 。 其 他 
的 新 选择 器 大 多 为 伪 类 ， 其 中 的 一 些 还 相当 复杂 ， 不 过 也 非常 强大 。 所 有 CSS3 选择 器 及 其 
完整 描述 见 a a or ， 简 介 与 示例 参见 www.w3.oreg/wiki/CSS/ 
Selectors。 

除了 Internet es 以 外 ， 其 他 浏览 器 对 选择 器 的 支持 程度 都 很 好 。Internet Explorer 直 

到 IE9 才 开 始 支 持 大 多 数 CSS3 中 新 增 的 选择 器 ( 尤其 是 伪 类 和 伪 元 素 ) 。 

TN 的 网 站 在 旧 的 浏览 器 里 的 样式 与 在 现代 浏览 器 里 的 样式 稍 有 差别 
也 是 没有 问题 的 。 不 过 ， 如 果 你 确实 希望 IE8 甚至 更 旧 的 浏览 器 也 能 使 用 这 些 选择 器 ， 可 以 
考虑 使 用 Keith Clark 的 Selectivizr ( http://selectivizr.com ) 。 根 据 他 的 介绍 ， 这 是 “一 个 在 
Internet Explorer 6 ~ 8 中 模拟 CSS3 伪 类 和 属性 选择 器 的 JavaScript 工具 ”。 根据 他 的 提示 
Selectivizr 有 一 些 限制 。 我 的 建议 是 尽 可 能 不 使 用 该 工具 (我 无 意 冒 犯 该 工具 本 身 ) 。 页 面 
上 使 用 的 JavaScript 越 多 ， 页面 的 加 载 时 间 就 越 长 ( 参见 第 19 章 ) ， 何 况 旧 的 浏览 器 (如 
IE8 ) 处 理 JavaScript 的 效率 要 低 得 多 。 
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为 文本 添加 样式 


本 章 内 容 

口 本 章 之 前 与 本 章 之 后 
口 选择 字体 系列 

口 指定 蔡 代 字体 

口 创建 笠 体 

口 应 用 粗 体格 式 

口 设置 字体 大 小 

口 设置 行 高 

口 同时 设置 所 有 字体 值 
口 设置 颜色 

口 设置 背景 

口 控制 间距 

口 增加 缩 进 

口 对 齐 文本 

口 修改 文本 的 大 小 写 
口 使 用 小 型 大 写字 母 
口 装饰 文本 

口 设置 空白 属性 











使 用 CSS 可 以 修改 文本 的 字体 、 大 小 、 
粗细 、 倾 斜 、 行 高 、 前 景 和 背景 颜色 、 间 中 
和 对 齐 方式 ， 可 以 决定 是 否 为 文本 添加 下 划 
线 或 删除 线 ， 可 以 将 文本 转化 为 全 部 使 用 大 
写字 母 、 全 部 使 用 小 写字 母 或 使 用 小 型 大 写 








字母 。 而 且 ， 通 过 短 短 几 行 代码 就 可 以 让 这 
些 样式 应 用 于 整 篇 文档 或 整个 网 站 。 在 本 草 
中 ， 你 将 学 习 如 何 做 到 这 些 。 

本 章 讨论 的 很 多 属性 只 是 应 用 到 了 文本 ， 
10.10 节 中 讨论 的 属性 也 应 用 到 了 非 文 本 元 
系 。 另 外 其 他 音节 也 涉及 一 些 文本 相关 主题 : 
第 13 章 讲 到 了 Web 字体 ， 第 14 章 讲 到 了 为 
文本 添加 阴影 。 

所 有 这 些 CSS 特性 都 是 设计 网 页 不 可 或 
缺 的 部 分 。 在 第 11 章 讲 解 CSS 布局 时 我 们 还 
会 继续 关注 CSS 特性 。 


10.1 ”本章 之 击 与 本 章 之 后 


浏览 硕 会 给 页 面 添加 极 少 量 的 默认 样式 
(如 图 10.1.1 所 示 ) 。 在 本 半 中 ,我们 将 尝试 
对 文本 和 硼 景 应 用 我 们 目 己 的 CSS， 从 而 改 
善 页 面 的 外 观 (如 网 10.1.2 所 示 ) 。 在 学 习 
本 章 的 过 程 中 ， 你 可 能 需要 用 到 图 10.1.3 所 
示 的 简化 过 的 HIML (尤其 要 注意 其 中 的 类 
名 是 如 何在 CSS 中 使 用 的 ) 。 完 整 的 HTML 
及 本 和 曹 的 所 有 示例 都 可 以 在 本 书 配套 网 站 上 
查找 ， 见 www.htmlcssvgs.com/8ed/10。 
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Barcelona's Architect 


APFSceH Gaudf's :scrocblc tvethtings berng SHEoe of pertses iO Rasceions cac yeat. 


<body> 
<article class="architect"> 
«<div class="intro"> 
<h1>Barcelona's Architect</h1> 


Ceaud’s soa coafocmiry, siresdy visble In bis eenage ye Coupied wih ha gutet bn hrm 
devoboa 10 the charch, made 2 unlgue touryiatioe fee bis thooghs wed vicas Hin search tev 
simoplycity., based on his careful obyervsDeone of eature, |s uite apparent in his work. from @e 
Pu Gucll end lo tpcsedihie sculpeenes sad eosalcs. % he Chusch of he Sacred Parmady and lm 
paskc , beloss sowery 


La Sagrada Familia 


沁 思 加 等 者 还 外 


The cnesplkczacly cased abd cunootly anfitathed eanterpeece Id ok the Expeanory TernpPic of 


<p class="subhead'">Antoni Gaudi's 
— incredible buildings bring...</p> 


<p>Gaudi's...search for simplicity...is 
个 quite apparent in his work, from the 
— «a href="#park-guell">Park Guell</a> 
=»... to the Church of the «<a href= 
> "#sagrada-familia">Sacred Family 
/a wal/p> 

</div> 


that when, in 1925, be was 
Souck by a sorvetcar tn romt of 人 he churcty. be was mistakee for we ndgent! apd beougptt in a 
bospita] for Ihe poo¢ whene te died soon thereafier 


The Sagrwis Punlliy atiracts vee the won -fehlgj ow 40 Ey Com ID hepe Pan doe io hid rage 
Soy wd es still enfisished sane, of which Oe cverpecsers scaffoldieg and crancs we permancat 
meltsess Bo Gheve 1s sonetheng mors In Se SagraGs Fasdlia, Onud) ng brings marare spd 
weltectur oggther — Se oanng spire lock sormethesg Me rng yagrmniiey tn an 
Underground cave — thts time ln everance 


Park Guell 
ede 


The Pa Oocl 由 wa sealinss sme of the charnoies Howed Rose I AT Ranfy The 
bowsininheod. Cased prolcecs is the Park Doc wes ww baild a sesiGcesia) Com whore 
mdents weuid lOve whert they lived. BH was pever nished 


<section class="project family > 
<h2 id="sagrada-familia">La Sagrada 
> Familiax</h2> 


Perhags hot iy for the bo sisce wow wo oll pnt I enjoy B, The Pk Ouel} is se on sh 
Overhooiiaeg pracically oil of Barcehoas ]5 bowedted sad even comtorubie wrpestine beach ls 
flled wi® forytgners aed incah ike every day of fhe week js movane lrard has become 
ypoeymous woh fhe otty liseli 





<div class="photos"> 


10.1.1 页 面 的 默认 样式 在 所 有 的 浏览 锅 中 都 是 <img src="img/red-bubbles.jpg” ... /> 
与 此 类 似 的 〈 但 标题 的 字号 大 小 在 不 同 的 浏览 硕 中 ... 6 more images ... 

可 能 略 有 差异 ) 

<p>The complicatedly named...</p> 


<p>The Sagrada Familia attracts...</p> 
</section> 


BARCELONAS ARCHITECT 


Antom Gaudi's incredible buildings bring millioms of 
towurists to Barcelona esch yesr 


<section class="project guel]1 > 
<h2 id="park-guell">Park Guell</h2> 


<div class="photos"> 
“5 1MARES sw 
</div> 


LA SAGRADA FAMILIA 


芷 吕 .加 车 车 到 册 


The comstcnegy saad wo OO MA Do at HW we 
ssory Tom of the Socrng Feney 4 te most wated fing m Brceions mn 4, 


Ca Corines Ws von of ratvre and CAeCDAE wth Pes OFroDOn 10 ms fen HI 
HUE oN Sm OO was Mt th ne Msrmed 2 Oh proc Sage of 
eeromene at We wot ote RATounded by plns wel Seengs, wd 50 eomperedy 
ored hi Gst eeveed pesiee het when tm I 926 he wos struch Dy 6 seredtcar 
m or of tpe cch he wy tr for wr Mr rd brosg $0 4 owt or 
ihe poor were he ed soon theresfter 


The Shorvoe Femie ottrects evea we pomrehGo to Rs doors 1 ree bar doe 
4D th trage ory and Es 及 有 umnhrened state, of whreh the verpreeent watfokgng 
WO Ces we Permanent erminewry Bet Snere 9 sometrg more hn in Sag sm 
Fe Cavd ogan trrgt "ore mo wetectye bother 一 he oarmg we ch 
Some WN We MT 5033gviee nn on SO FO Cave 一 1 De mn rErerance 


<p>The Park Guell always reminds me 
> of ... Howard Roark in ... <a href= 
= "http://..."><cite>The Fountainhead 
个 </cite></a>...</p> 

<p>...now we <em>all</em> get to enjoy 
-VD 


PARK GUELL 


</Section> 
</article> 
</body> 
</htm]> 


The Pa Gol heyys renende me of he Ch Howand Row mn An Href 
The Foumtniiesd Oo Peiect © te Pa Gd was ww be 6 1 
Comererity whone rewerty wouds oer wie they Prd E mas rever rested 





Fernaes that 村 /or the bos Woe now we of wt to roy The Put Gon 8 wt 
en 6 Mi overioohing practeaty WW of Barceera Ns beauiAa md even corforatie 
ee borch w Ped whth town wd ca shite every Guy of the week Hs 
MOSNC 63 Nas become ynonyrmous win the crty Foes 


图 10.1.3 HTML 中 包含 了 很 多 类 名 ， 方便 CSS 
找到 这 些 特殊 的 区 域 





10.1.2 你 即将 了 解 到 ， 对 页 面 施加 一 系列 样式 
可 以 改变 页 面 的 外 观 。 可 以 通过 www.htmlcssvqs. 
com/8ed/text-final 访问 这 个 页 面 
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10.2 选择 字体 系列 


对 于 目 己 的 网 站 ,一 大 关键 问题 就 是 选 
择 标 题 和 主体 文本 所 用 的 字体 。 你 将 了 解 到 ， 
并 非 所 有 的 系统 都 支持 相同 的 默认 字体 ， 
此 ， 应 该 定义 替代 字体 作为 备 选 。 不 过 ， 证 
我 们 首先 看 看 如 何 定义 单个 字体 〈 如 图 10.2.1 
和 图 10.2.2 所 示 ) ， 以 及 未 提供 替代 字体 的 
影响 ( 如 图 10.2.3 所 示 ) 。 








设置 字体 的 万 法 
在 样式 表 中 和 需要 的 选择 六 之 后 ， 输 入 





font-family: mame， 这 里 的 name 是 首选 字体 
的 名 称 ， 参 见 图 10.2.1。 


body { 
font-family: Geneva; 


} 


ht, 2 4 
font-family: “Gill 9ans ; 


} 


10.2.1 由 于 font-family 是 继承 属性 ， 而 我 们 
对 body 元 素 设置 了 Geneva 字体 ， 该 样式 会 应 用 到 
其 他 元 素 。 通过 对 hi 和 h2 元 素 设 置 Gill Sans 字体 ， 
敌 辣 了 继承 属性 





rb auaddi — rr tii 


Barcelona's Architect 
Antonl Gaudi's incradible budldings bring millions of tounsts tu Barcelona each year. 


Gaudl's non-contormity, already visible in his teenage years, CoUped with his qulet 
but firm devotion to the church, made a uniqus foundationfor his thoughts and 
Heas, His search for gmplicty, based on hes careful observations of nature are 
ulte apparent in hls work, from the Park Guell and its Incredlble sculptures and 
mosaics, to the Chureh of the Sacred Family and its organie, bulbous towers. 


La Sagrada Familia 


图 10.2.2 在 OSX 系 统 中 ，Geneva 和 Gill Sans 
很 常见 ， 因 此 可 以 正常 显示 。p 元 素 和 a 元 素 继承 
了 body 的 font-family 设置 ， 除 了 标题 之 外 的 文 
本 都 显示 为 Geneva。 如 果 没 有 为 hl 和 h2 指定 Gill 
Sans 字体 ， 它 们 也 将 显示 为 Geneva 字体 
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人 Antoni Gaudi Introduction 


Barcelona's Architect 


Antom Gaudis incredible buildings bring millions of tourists to Barcelona each year. 


Gaudi's non-conformity. already visible tn his teenage years. coupled with his qulet 
but firm devotion to the church, made a unigue foundation for his thoughts and ideas. 
His search for simplicity. based on his careful observations of nature are quite 
apparent in his work. from the Park Guell and its incredible sculptures and mosaics, 
to the Church of the Sacred Family and its organic, bulbous towers. 


La Sagrada Familia 





10.2.3 一 些 Windows 系统 中 并 未 安装 Geneva 
和 Gil Sans 字体 。 如 果 选 择 了 访问 者 系统 中 没有 
的 字体 ， 他 们 的 浏览 器 中 就 会 显示 默认 字体 ( 如 
图 所 示 ，Windows 中 的 默认 字体 是 Times New 
Roman ) 


对 于 包 
用 引号 ( 单 引号 或 双 引 号 ) 


含 多 个 单词 的 字体 名 称 ， 应 该 
包围 起 来 。 
僵 国 可 以 使 用 小 写字 母 指 定 字 体 名 称 ， 如 


font-family: geneva;, 


开发 人 员 可 以 指定 自己 想 要 设置 的 任 
二 不 过 访问 者 只 会 看 到 他 们 的 系统 里 


安装 的 Et 一 种 特殊 情况 是 加 载 Web 字体 ， 
参见 第 13 章 ) 。 关 于 Windows 和 Mac OS X 
共享 的 标准 字体 的 更 多 信 息 参 见 下 一 节 


虽然 font-family 属性 是 继承 的 ， 但 
有 几 个 元 素 不 会 继承 父 元 素 的 字体 设置 ， 其 
中 有 表单 的 select、textarea 和 input 元 素 
(参见 第 16 章 ) 。 不 过 ， 可 以 强制 它们 继承 
父 元 素 的 字体 设置 ， 代 码 为 input， 


inherit; }。 


Select， 


textarea { font-family: 


使 用 通用 的 font 属性 可 以 一 次 性 定 
义 字 体 、 大 小 和 行 高 。 参 见 10.8 节 。 
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10.3 指定 蔡 代 字体 


尽管 你 可 以 指定 自己 想 要 的 任何 字体 ， 
但 这 些 字 体 不 一 定 在 每 个 系统 上 都 能 显示 出 
来 (如 上 一 市 所 示 ) 。 为 此 ， 可 以 在 font- 
family 属性 中 列举 一 种 以 上 的 字体 (如 
图 10.3.1 所 示 ) 。 浏 览 硕 会 使 用 列表 中 人 第 一 个 
已 安装 在 访问 者 系统 内 的 字体 (如 图 10.3.2 所 
示 和 图 10.3.3 所 示 呈 Web 字 体 ( 参见 第 13 章 )。 








body { 
font-family: Geneva, Tahoma, sans-serif; 


font-family: "Gill Sans", "Gill Sans MT", 
» Calibri, sans-serif; 


图 10.3.1 第 一 字体 栈 告诉 浏览 絮 如 果 系 统 上 没有 
Geneva 就 用 Tahoma， 如 果 这 两 个 都 没有 束 用 标准 
的 sans-serif。 标 题 的 字体 栈 提供 了 三 种 备 选 字体 ， 
替换 字体 可 能 无 法 完全 匹配 首先 字体 ， 不 过 ， 我 们 
的 目标 是 指定 尽 可 能 接近 的 字体 








Antoni Gaudi - Introduction 





Antoni Gaudi - Introduction 


Barcelona's Architect 


Antoni Gaudi's incredible buildings bring millions 
of tourists to Barcelona each year. 


Gaudi's non-conformity, already visible in his 
teenage years, coupled with his quiet but firm 


devotion to the church, made a unique 
foundation for his thoughts and ideas. His search 
for simplicity, based on his careful observations 
of nature are quite apparent in his work, from 
the Park Guell and its incredible sculptures and 
mosaics, to the Church of the Sacred Family and 
its organic, bulbous towers. 





La Sagrada Familia 


10.3.2 ”安装 了 Geneva 和 Gill Sans 的 系统 (如 
这 里 的 OS X ) 会 继续 使 用 该 字体 。 因 此 ， 这 里 显 
示 的 字体 与 图 10.2.2 是 完全 一 样 的 〈 和 截图 看 起 来 不 
一 样 ， 这 是 因为 本 图 里 的 浏览 器 宽度 更 罕 ) 





| Firejox = | 
= 一 一 一 一 一 一 一 一 


(WY Antoni Gaudi- Introduction 


Barcelona's Architect 


Antoni Gaudfs incredible buildings bring millions 
of tourists to Barcelona each year. 


Gaudrs non-conformity, already visible in his 
teenage years, coupled with his quiet but firm 
devotion to the church, made a unique 
foundation for his thoughts and ideas. His search 
for simplicity, based on his careful observations 
of nature are guite apparent in his work, from 
the Park Guell and its incredible sculptures and 
mosaics, to the Church of the Sacred Family and 
its organic, bulbous towers. 


La Sagrada Familia 





10.3.3 没有 Geneva 字体 的 系统 会 使 用 Tahoma 
字体 ( 对 于 这 种 情况 ， 大 多 数 Windows 系统 都 会 
使 用 后 一 种 字体 ) 。 如 果 Tahoma 也 没有 ， 浏 览 句 
会 使 用 sans-serif 字体 。 标 题字 体 也 用 同样 的 方法 
处 理 。Windows 机 种 既 没 有 Gill Sans， 也 没有 Gill 
Sans MT， 标 题 是 使 用 第 三 种 蔡 换 字体 Calibri 显 
示 的 


字体 列表 称 为 字体 栈 ( font stack ) 。 通常 ， 
字体 栈 至 少 包 含 三 个 字体 : 希望 使 用 的 字体 、 
一 个 或 几 个 替代 字体 ， 以 及 一 个 表示 类 属 的 
标准 字体 ， 表 示 “ 如 果 其 他 的 字体 都 不 可 用 ， 
就 用 这 个 ”( 参见 第 一 条 提示 ) 。 

补充 材料 “OS X 和 Windows 上 默认 共有 
的 字体 ”讨论 了 两 个 系统 共享 的 几 种 字体 。 
使 用 两 种 系统 上 的 共享 字体 或 者 Web 字体 的 
情况 很 常见 ， 因 此 通常 访问 者 看 到 的 字体 都 


是 一 样 。 


指定 替代 字体 

(1) 输入 font-family: name， 这 里 的 name 
是 首选 字体 的 名 称 。 

(2) 输入 ，name2， 这 里 的 name2 是 第 二 
字体 的 名 称 。 用 一 个 逗号 和 空格 分 隔 每 个 字体 。 

(3) 根据 需要 ， 重 复 第 2) 步 ， 最 后 以 
一 个 表示 类 属 的 标准 字体 (serif、sans- 
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由 


serif、cursive、fantasy 或 monospace“， 它 


们 代表 首选 字体 最 为 接近 的 风格 ) 结束 字体 





列表 。 


OS X 和 Windows 上 默认 共有 的 字体 


OS X 和 Windows 上 上 默认 都 有 的 字体 
是 非常 有 限 的 ， 它 们 仅 包 括 Arial、Comic 
Sans MS、 Courier New、GWeorgla、JImpact、 
Trebuchet MS、Times New Roman 和 Verdana。 
结果 ， 绝 大 多 数 网 站 使 用 的 字体 都 无 外 平 
这 些 。 尽 管 它们 在 Mac OS 和 Windows 上 
的 浏览 器 中 显示 的 效果 也 并 不 完全 一 致 ， 
但 至 少 你 可 以 肯定 它们 都 能 显示 出 来 。 

除 此 之 外 ， 还 有 别 的 选择 ( 如 图 10.3.1 
所 示 )。OS 义 和 Windows 都 包含 了 更 多 ( 却 
不 相同 的 ) 可 用 于 字体 栈 的 系统 字体 。 在 
网 上 搜索 “font stacks” (字体 栈 ) ， 就 可 
以 看 到 很 多 font-family 声明 。 可 以 将 这 些 
声明 复制 到 你 的 样式 表 里 ， 从 而 为 不 同 的 
访问 者 提供 相似 的 字体 。 

此 外 ， 还 可 以 在 网 页 中 加 载 系统 默认 
没有 的 字体 。Web 设计 人 员 多 年 来 都 病 迷 
J 这 种 想法 ， 这 午 林 从 村 太 为 现实 Web 
字体 变 得 越 来 越 首 遍 ， 第 13 章 将 讲解 如 何 
使 用 Web 字体 。 


GO cursive 、fantasy、monospace 分 别 表示 手写 字体 、 


在 Windows 上 显示 Arial， 在 OS X 上 显示 
Helvetica 

XD 
WW 

几乎 可 以 确定 Arial 是 万 维 网 上 用 的 
最 多 的 字体 ， 为 font-family: arial， 
helvetica，sans-serif; 这 条 声明 可 谓 随处 
可 见 。 问 题 是 ， 设 计 师 通常 更 愿意 在 能 使 
用 Helvetica 的 情况 下 使 用 Helvetica， 但 大 
多 数 OS X 机 器 也 安装 有 Arial， 因 此 在 这 
个 字体 栈 中 ，Helvetica 就 被 忽略 了 。 

所 有 的 OSX 机 器 都 有 Helvetica， 但 
Windows 上 一 般 没 有 这 个 字体 。 即 便 哪 个 
用 户 在 Windows 上 安装 了 这 个 字体 ， 其 显 
示 效 果 也 不 太 如 意 。 这 是 字体 栈 中 不 会 将 
Helvetica 列 在 Arial 前 面 的 原因 。 

怎么 办 呢 ? 解决 方案 很 简单 ， 就 是 使 
用 font-family: sans-serif;。 这 种 方法 
会 让 所 有 的 操作 系统 使 用 无 衬 线 字 体 一 一 
Windows 的 浏览 器 显示 Arial， 而 OS X 的 


I DR 


浏览 名 则 显示 Helvetica。 


系统 通常 都 具有 下 列表 示 类 属 的 字 
体 名 称 对 应 的 字体 : serif、sans-serif、 
cursive、fantasy 和 monospace。 因 此 ， 标 准 
的 做 法 是 在 字体 栈 的 末尾 指定 上 述 字 体 名 称 
中 的 一 种 。 到 目前 为 止 ，serif 和 sans-serif 
是 用 得 最 多 的 ， 因 为 它们 分 别 对 应 于 最 为 常 
见 的 两 类 字体 ，serif 通常 对 应 Windows 上 
的 Times New Roman 和 OS X 上 的 Times。 
sans-serif 通常 对 应 Windows 上 的 Arial 和 
OS X 上 的 Helvetica。 


装饰 字体 和 等 宽 字 体 。 一 一 译 者 注 
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Geneva 字体 栈 通 常会 包 

其 作为 第 第 三 个 选项 ， Ra Geneva 
ya Tahoma 的 少量 操作 系统 。 这 里 没有 包 
含 该 字体 ， 主 要 是 为 了 演示 字体 栈 可 以 包含 
不 同 数量 的 字体 ， 不 过 在 接 下 来 的 例子 中 ， 
会 将 它 放 进 字体 栈 里 。 


念 Verdana， 


可 以 在 同一 个 font-family 规则 中 为 
不 同 的 字母 表 指 定 字 体 ( 如 日 语 和 英语 ) ， 
从 而 对 包含 不 同 语 言 和 书写 体系 的 文本 进 和 
格式 化 。 


10.4 创建 斜体 


在 传统 出 版 业 中 ,斜体 通 常用 来 表 
示 引 述 、 强 调 的 文本 、 外 文 单词 (如 de 
rigsueur ) 、 学 名 ( 如 Homo sapiens) 、 电 影 
片 名 等 。 

浏览 融通 和 常 让 一 些 HTML 元 素 ( 如 
cite、em 和 i 并) 默认 以 斜体 显示 ， 因 此 ， 不 必 
在 CSS 中 对 这 些 元 素 设 置 斜体 。 有 时 你 需要 

让 一 些 内 容 以 斜体 显示 ,但 上 述 元 素 从 语义 

上 来 说 者 不 合 合适 。 使 用 CSS 的 font-style 属 
性 可 以 让 任何 元 素 中 的 文本 以 斜体 显示 。 

作为 示例 ， 图 10.4.1 说 明了 如 何 对 段落 
文本 添加 笠 体 样式 。 (由 于 这 样 显示 阅读 体 
验 太 差 ， 如 图 10.4.2 所 示 ， 因 此 ， 接 下 来 的 
例子 中 不 会 保留 这 一 样式 规则 。 ) 


1. 创建 斜体 
(1) 输入 font-style:。 











(2) 在 : (冒号 ) 后 输入 italic (创建 和 斜 
体 文本 ) 或 oblique (创建 倾斜 文本 ) 。( 99% 


的 情况 下 都 会 使 用 italic。 在 所 有 情况 下 ， 
很 难 察觉 使 用 oblique 与 italic 的 差异 。) 
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body { 
font-family: Geneva, Tahoma, Verdana, 
sans-serif; 


font-family: "Gill Sans", "Gill Sans MT", 
‘Calibri, sans-serif; 


font-style: italic; 


图 10.4.1 在 这 个 例子 中 ， 上 段落 以 和 斜体 显示 


Antoni Gaudi = Introduction 


ntoni Gaudi = Introduction 


Barcelona's Architect 


Antoni Gaudr's incredible buildings bring millions 
of tourists to Barcelona each year. 


Gaudi's non-conformity, already visible in his 
teenage years, Coupled with his quiet but firm 
devotion to the church, made a uniqgue 
foundation for his thoughts and ideas. His search 
for simplicity, based on his careful observations 
of nature are quite apparent in his work, from 
the Park Guell and its incredible sculptures and 
mosaics, to the Church of the Sacred Farmy and 
its organic, bulbous towers. 


La Sagrada Familia 





图 10.4.2 ”两 个 标题 以 正体 显示 ， 它 们 之 间 的 段落 
以 斜体 显示 


2. 取消 和 料 体 


输入 font-style: normal。 
想 取消 斜体 的 一 能 的 原因 是 ， 有 要 


在 从 父 元 素 中 继承 了 斜体 格式 的 段落 中 对 某 
些 文字 进行 强调 。 关 于 继承 的 更 多 细节 ， 参 
考 7.3 节 。 
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关于 编写 语义 化 HTML 的 重要 性 参 
见 1.8 节 。 


真 斜体 、 假 斜体 、 倾 斜 版 本 的 区 别 

字体 的 斜体 版 本 通常 是 由 字体 设计 师 从 
头 创 建 的 ， 尤 其 是 有 衬 线 字体 。 字 体 的 斜 
体 版 本 不 仅仅 是 普通 文本 的 倾斜 版 本 ， 它 们 
的 形式 有 一 些 合理 的 差异 。 例 如 ，Palatino 
Linotype 就 有 一 份 真正 的 斜体 字体 ， 参 见 
图 10.4.3。 通 过 字母 a 可 以 很 清晰 地 看 到 ， 
斜体 不 仅仅 是 对 字母 进行 倾斜 产生 的 效果 。 

2 
如 果 对 这 些 字 体 的 文本 设置 font-style: 
italic， 浏览 器 就 会 显示 一 种 计算 机 模拟 出 
来 的 假 斜 体 ， 即 简单 地 对 普通 字母 进行 倾斜 
尺 模拟 斜体 风格 (参见 图 10.4.3 ) 。 这 两 种 
方式 的 质量 是 有 所 不 同 的 。 

此 外 ， 字 体 设 计 师 还 可 能 专门 为 字体 创 
建 倾斜 版 本 ， 它 们 通常 是 对 普通 字母 进行 
倾斜 ， 同 时 可 能 对 字符 间距 等 进行 微调 而 产 
本 
相同 的 。 要 使 用 字体 的 倾斜 版 本 ， 可 以 设置 


10.5 ”应 用 粗 体格 式 


粗 体 格式 可 能 是 让 文本 突出 显示 的 最 稼 
见 、 最 有 效 的 方式 。 人 例如， 浏览 融通 笛 默 认 
为 hl ~ h6 添加 粗 体 格式 。 同 斜体 一 样 ， 可 以 
为 任何 格式 添加 或 取消 粗 体 。 添 加 粗 体 和 取 
消 粗 体 使 用 font-weight 属性 (参见 图 10.5.1 
和 图 10.5.2 ) 。 


1. 应 用 粗 体格 式 
(1) 输入 font-weight:。 
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font-style 属性 是 继承 的 。 


font-style: oblique;， 不 过 这 样 做 并 不 常 
见 。 如 果 字 体 没有 斜体 版 本 或 倾斜 版 本 ， 就 
会 以 伪 斜 体 显示 。 


AOA Real ltalic vs, Faux ltalic 





Real ltalic vs. Faux ltalic 
Palatino Linotype sample text. 


Palatino Linotype sample text (real italic). 


Geneva sample text. 


Geneva sample text (faux italic). 





图 10.4.3 这 里 有 两 组 应 用 了 不 同 字体 
的 文字 ,每 组 的 第 一 行 都 是 普通 的 文本 ， 
17 EI I font style italie; 
的 文本 。 如 果 仔 细 观 察 ， 你 会 发 现 ， 
Palatino Linotype 字体 对 斜体 字母 作 了 特 
殊 处 理 。 正 体 与 斜体 的 区 别 在 a、p 和 y 
等 字母 上 表现 得 最 为 明显 。 由 于 Geneva 
没有 和 斜体 字母 ， 因 此 浏览 絮 只 是 简单 地 
让 普通 文本 倾斜 ， 模 拟 斜 体 效 果 





(2) 输入 bold， 让 文本 显示 为 具有 平均 加 
粗 值 的 粗 体 。 这 一 属性 值 适用 于 大 多 数 情况 。 

或 者 输入 100 ~ 900 之 间 的 100 的 倍数 ， 
其 中 400 代表 正常 粗细 ，700 代表 粗 体 。 如 果 
使 用 的 是 具有 多 种 粗细 版 本 的 字体 ， 这 种 方法 
就 很 有 用 ( 有些 Web 字体 就 采用 了 这 种 方法 )。 

或 者 输入 bolder〈 更 粗 ) 或 lighter (更 
细 ) 以 设置 相对 当前 粗细 的 值 。 
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body { 
font-family: Geneva, Tahoma, Verdana, 
— sans-serif; 


font-family: "Gill Sans", "Gill Sans MT ， 


— Calibri, sans-serif; 
font-weight: normal; 


} 


em， 

a:link, 

.intro .subhead { 
font-weight: bold; 


} 





10.5.1 浏览 右 会 自动 为 标题 hl ~ h6 添加 粗 体 
格式 , 我 为 所 有 的 hi 和 hz2 元素 应 用 了 正常 的 粗细 ， 
取消 了 自动 添加 的 粗 体 格式 。 同 时 ， 我 为 em 文本 及 
链接 、.subhead 添加 了 粗 体格 式 (参见 图 10.5.2 ) 





全 9 Antoni Gaudi - Introduction 


Antoni Gaudi - Introduction 


Barcelona's Architect 


Antoni Gaudi's incredible buildings bring 
millions of tourists to Barcelona each year. 


Gaudi's non-conformity, already visible in his 
teenage years, coupled with his quiet but 和 rm 
devotion to the church, made a unique 
foundation for his thoughts and ideas. His search 
for simplicity, based on his careful observations 
of nature are quite apparent in his work, from 
the Park Guell and its incredible sculptures and 
mosaics, to the Church of the Sacred Family 
and its organic, bulbous towers. 


La Sagrada Familia 








10.5.2 标题 是 以 常规 粗细 显示 的 ， 而 不 是 默认 
的 粗 体 ( 参见 图 10.4.2 ) 。.subhead 类 段落 是 以 粗 
体 显示 的 ， 链 接 也 是 


2. 取消 粗 体格 式 

输入 font-weight: 
字体 服务 ， 如 Google Fonts， 
weight: 400。 ) 


( 有些 Web 
要 求 使 用 font- 


normal, 
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园 阮 ”由 于 各 种 字体 定义 粗细 的 方式 并 不 相 
同 ， 因 此 预定 义 值 在 不 同 字体 上 的 表现 可 能 
不 一 致 。 预 定义 值 用 以 表示 某 一 给 定 字体 下 
的 相对 值 ， 如 700 在 一 种 字体 中 看 起 来 可 能 
比 在 另 一 种 字体 中 要 粗 。 


字体 本 身 有 时 候 不 包括 与 相关 值 对 应 
的 不 同 程度 的 粗细 。 如 果 字 体 的 粗细 少 于 九 
种 ， 或 者 这 些 粗细 集中 于 范围 的 一 端 ， 那 么 
一 些 数值 就 可 能 对 应 于 同样 的 粗细 ， 在 网 页 
上 的 显示 效果 就 都 一 样 ， 参 见 图 10.5.3。 


Antoni Gaudi — is 
Antoni Gaudi - Introduction 下 
af CNITECTUre TOQETNEer— tNe SOariNd 5 FES 100K 
something like rising stalagmites in an underground 
cave 一 this time in reverance. 


Park Guell 


The Park Guell always reminds me of Howard Roark 
in Ayn Rand's The Fountainhead. Gaudi's project 
in the Park Guell was to build a residential 
community whose residents would love where they 
lived. lt was never finished. 


Perhaps that is for the best, since now we all get 
to oy 1 it. The Park 3 is st on a hill 





10.5.3 在 页 面 的 底部 ， 可 以 看 到 一 个 链接 ( The 
Fountainhead ) 和 单词 all。 根 据 我 们 新 添加 的 样式 ， 
它们 都 以 粗 体 显示 ， 同 时 它们 还 会 因为 浏览 需 的 默 
认 样 式 而 显示 为 和 斜体。 根据 其 含义 这 两 个 短 语 分 出 
由 cite 和 em 标记 (注意 h2 文字 Park Guell 是 普通 
字体 ， 没 有 加 粗 ) 


6 鉴于 前 两 条 提示 ， 添 加 粗 体 样式 的 通 


行 做 法 是 简单 地 写成 font-weight: bold。 
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有 的 字体 没有 设计 粗 体 字 母 。 对 于 这 
些 字体 ， 如 果 声 明 font-weight: bold;， 浏 览 
器 会 显示 伪 粗 体 ( 如 图 10.5.4 和 图 10.5.5 所 
示 ) 。 对 伪 斜 体 的 讨论 参见 10.4 节 。 


9 Relativeweights ww 
Relative weights 


Helvetica at 100. 
Helvetica at 200. 
Helvetica at 300. 
Helvetica at 400. 
Helvetica at 500. 
Helvetica at 600. 
Helvetica at 700. 
Helvetica at 800. 
Helvetica at 900. 








10.5.4 有 的 粗细 值 不 同 的 文本 显示 的 效果 一 
致 ， 是 因为 Helvetica 并 没有 为 每 种 粗细 值 都 建立 
一 套 字 母 集 





Real Bold vs. Faux Bold 


关上 和 旧 全 
下 Real Bold vs. Faux Bold 





Palatino Linotype sample text. 


Palatino Linotype sample text (real bold). 


Geneva sample text. 


Geneva sample text (faux bold). 


图 10.5.5 同和 斜体 类 似 ，Palatino Linotype 字体 有 
粗 体 字母 ， 而 Geneva 没有 。 因 此 ， 对 于 Geneva， 
人 响 融 会 将 字母 加 粗 ， 模 拟 粗 体 效果 ， 而 这 样 做 的 
人 结果 则 是 不 够 锐利 、 优雅 ， 字 母 间 隔 也 不 是 特别 
理想 
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哪些 元 素 是 有 可 能 需要 取消 粗 体 的 
呢 ? 这 和 包括 任何 自动 添加 了 粗 体格 式 的 元 素 
( 应 该 能 想到 Strong、h1 ~ h6 和 b) ， 以 及 
继承 了 父 元 素 粗 体格 式 的 元 素 (参见 7.3 节 ) 。 


font-weight 属性 是 继承 的 。 


10.6 ”设置 字体 大 小 


为 网 页 里 的 文本 设置 字体 大 小 有 两 种 方 
式 : 直接 使 用 像素 指定 要 使 用 的 特定 字号 (如 
图 10.6.1 ~ 10.6.3 所 示 ), 或 使 用 百分数 em( 如 
图 10.6.4 和 图 10.6.5 所 示 ) 或 者 rem 指定 相 
对 于 父 元 对 文本 的 大 小 。 关 于 rem， 参 见 补 充 
材料 “使 用 rem 指定 字体 大 小 ”。 








。 [previous CSS] ... 


em， 

a:link, 

.intro .subhead { 
font-weight: bold; 

} 


h1 { 
font-size: 35pX; 


} 


h2 { 
font-size: 28px; 


} 


.intro .subhead { 
font-size: 18px; 


} 


.intro p { 
font-size: 17px; 


} 


.project p { 
font-size: 15px; 
} 








10.6.1 这 里 使 用 像素 值 指定 文本 大 小 ( 效果 参 
见 图 10.6.2 和 图 10.6.3 ) 
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Antoni Gaudi - Introduction 


Antoni Gaudi - Introduction 





Barcelona's Architect 


Antoni Gaudi's incredible buildings bring 
millions of tourists to Barcelona each year. 


Gaudi's non-conformity, already visible in his teenage 
years, coupled with his quiet but firm devotion to the 
church, made a unique foundation for his thoughts and 
ideas. His search for simplicity, based on his careful 
observations of nature, is quite apparent in his work, 
from the Park Guell and its incredible sculptures and 
mosaics, to the Church of the Sacred Family and its 
organic, bulbous towers, 


La Sagrada Familia 


图 10.6.2 图 10.6.1 中 指定 的 字体 在 浏览 硕 中 的 显 
示 效 果 。 标 题字 号 的 大 小 显示 了 信息 的 层级 关系 。 
主 标题 下面 的 介绍 区 域 中 的 段落 文本 字号 稍 大 











@eQ Antoni Gaudi ~ Introduction 


中 : Antoni Gaudi - Introduction ee ns "pe 
ItivSaivy, LU UG VTIUTLIIUI UG SALICU Tally dilly IL> 


organic, bulbous towers. 


La Sagrada Familia 


a 2 :二 "Wa . 





The complicatedly named and curiously unfinished masterpiece 
that is the Expiatory Temple of the Sacred Family is the most 
visited building in Barcelona. In it, Gaudi combines his vision of 
nature Ne eh with his NO to hee je His 


图 10.6.3 页面 te 


对 初 竺 者 来 说 ， 像 素 更 容易 理解 ， 不 过 

强烈 建议 你 一 开始 束 学 习 使 用 em 这 样 的 相对 
J- 使 用 相对 单位 可 以 有 更 大 的 灵活 性 ， 
而 且 对 定义 页 面 中 特定 的 设计 部 件 ( 如 空白 、 

边 距 等 ) 的 矿 才 很 有 帮助 。 在 各 种 矿 才 的 设 
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备 ( 智 能手 机、 平板 电脑 等 ) 不 断 涌现 的 今天 ， 
使 用 相对 单位 有 助 于 建立 在 各 种 设备 都 能 
示 良 好 的 页 面 ( 这 就 是 响应 式 Web 设计 涉及 
的 内 容 ， 参 见 第 12 章 ) 。 








body { 
font-family: Geneva, Tahoma, Verdana, 
» sans-serif; 
font-size: 100%; /* 16px */ 


} 


hi 

h2 { 
font-family: "Gill Sans", "Gill Sans MT", 
—» Calibri, sans-serif; 
font-weight: normal; 


font-size: 2.1875em; /* 35px/16px */ 


font-size: 1.75em; /* 28px/16px */ 


} 


em， 

a:link, 

.intro .subhead { 
font-weight: bold; 


} 


.intro .subhead { 
font-size: 1.125emj /* 18px/16px */ 


} 


.intro p { 
font-size: 1.0625em; /* 17px/16px */ 


} 


.Project p { 


font-size: .9375em; /* 15px/16px */ 
} 





10.6.4 body 里 的 font-size: 100% 声明 为 em 
字体 大 小 设置 了 参考 的 基准 。 这 里 的 100% 将 被 翻 
译 为 默认 字体 大 小 (大 多 数 系统 下 为 16px ) 。 这样， 
样式 表 的 结果 同 图 10.6.1 所 示 的 结果 便 是 一 样 的 。 
每 个 font-size 属性 值 后 面 的 注释 解释 了 该 值 的 计 
猎 方 法 同时 显示 了 等 价 的 像 系 值 
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[5 时 由 时 局 | niaoni Gdi 一 |nirtad ictran 
mn) Gud = lenradortian 


Barcelonas Architect 


Antoni Gaudi's incredible buildings bring 
millions of touriats to Barcelona each year. 


Gaudrs non-conformity, already visible in his teaenage 
years, COUpled with his quiet but firm devorion to the 
church, made a UNigue foundation tor hs thoughts and 
Meas, His search for Simplicity, based on his careful 
bservations of nature, is quite apparent in his work, 
fram the Park Guell ard lts lncredible sculptures and 
mosalcs, to the Church of the Sacred Famlly and its 
organic, bulbous towers. 


La Sagrada Familia 


The complicatedly named and curlioushy unfhnished masterplece 

that is the Expiatory Temgple of the Sacred Family is tha most 

vidited bullding in Barcelona. In it, Gaudl combines his vision of 

en rim 
10.6.5 在 大 多 数 系 统 中 ， 如 果 使 用 默认 设置 ， 
以 em 为 基础 的 字体 大 小 同 以 像素 为 基础 的 版 本 是 
一 样 的 ( 如 图 10.6.2 和 图 10.6.3 所 示 ) 





1. 理解 em 和 百分数 字体 大 小 

设置 相对 于 父 元 素 的 字体 大 小 需要 一 点 
时 间 去 习惯 。 你 需要 理解 浏览 器 处 理 这 些 相 
对 于 父 元 素 的 单位 的 方式 ， 下 面 花 一 点 时 间 
解释 一 下 。 

不 过 站 和 完 要 说 明 ， 使 用 这 种 方法 时 ， 最 
好 在 body 元 素 上 建立 一 个 基准 ， 即 声明 body 
{ font-size:100%; } (参见 图 10.6.4) 。 大 
多 数 时 候 ， 这 项 设置 等 价 于 将 字体 大 小 设 为 
16px， 即 大 多 数 系 统 的 默认 字体 大 小 。 照 例 ， 
该 属性 值 传递 至 其 他 的 元 系 ( 记 住 ，font- 
size 是 继承 性 属性 ) ， 除 非 其 他 元 素 通 过 浏 
览 需 默 认 设 置 了 上 自己 的 font-size, 或 者 在 样 
式 表 指 定 了 上 自己 的 font-size。( 多 数 元 素 是 
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16px， 但 默认 情况 下 h1 ~ h6 稍 大 。 ) 

那么 ， 如 何 计算 要 指定 的 em" 值 呢 ? 实 
际 上 ，lem 总 是 等 于 默认 的 字号 大 小 ， 这 是 
em 的 工作 原理 。 在 这 里 ，1lem 就 等 于 16px， 
因为 我 们 将 其 创建 为 元 素 的 默认 字号 。 据 此 
可 以 通过 一 点 点 除法 确定 em 值 (或 百分比 ) 。 

要 指定 的 字体 大 小 / 父 元 素 的 字体 大 小 = 值 

让 我 们 来 看 看 如 何 将 图 10.6.1 中 的 像素 
值 改 为 em。 例 如， 如 果 要 将 hi 设 为 35px， 
同时 已 知 其 父 元 素 的 字体 大 小 为 16px， 因 此 


35 / 16 = 2.1875 

此 ， 设 置 h1{font-size: 2.1875em;} 
就 可 以 了 (参见 图 10.6.4 ) 。 这 条 规则 表示 “将 
hl 文本 的 大 小 设置 为 其 父 元 素 文 本 大 小 的 
2.1875 倍 ”。 田 一 种 方式 是 号 成 hi { font- 
size: 218.75%; }。 不 过 ， 除 了 在 body 中 设 
置 基准 font-size 时 使 用 百分数 以 外 ， 设 置 字 
体 大 小 时 使 用 em 比 百 分 数 更 为 常见 。 

再 如 ， 要 将 project 类 上 段落 文本 设置 为 
1SpXx， 而 

15 / 16 = .9375 

因此 , 设置 p { font-size: 0.9375em; } ， 
参见 图 10.6.4( 这 个 值 也 可 以 设 成 93.75% ) 。 

再 讨论 一 个 例子 。 这 可 能 是 你 感到 困惑 
的 地 方 。 页 面 中 的 第 二 个 段落 Gaudfs non- 
conformity... 包含 两 个 链接 (如 网 10.6.5 和 
图 10.6.6 所 示 ) 。 段 落 本 映 的 字体 样式 设置 
为 .intro p { font-size: 1.0625em; }， 由 于 
17/16=1.0625， 因 而 段落 文本 字号 为 17 像素 。 

假设 要 让 链接 显示 为 16px， 同 时 让 段 
沙里 的 其 他 文本 仍 显示 为 17px。 你 可 能 打算 
将 链接 的 font-size 设 为 lem (.intro a { 
font-size: 1em; }) ， 因 为 lem = 16px。 





























J 在 排版 领域 ，em 是 一 种 量度 单位 ，lem 等 于 当前 指定 的 字号 大 小 。em 这 一 名 称 与 字母 M 有 关 ， 起 初 ，lem 等 


于 给 定 字体 环境 下 字母 M 的 宽度 。 一 一 译 者 注 
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<div class="intro"> 
<h1i>Barcelona's Architect</h1> 


<p>Gaudi's non-conformity...His search for simplicity...is quite apparent in his work, from 


the <a href="#park-guell">Park Guell</a> 


... to the Church of the <a href="#sagrada- 


familia">Sacred Family</a> and its organic, bulbous towers.</p> 


</div> 








10.6.6 这 段 HTML 包含 两 个 a 元素， 它们 都 位 于 一 个 父 元 素 p 中 。div 容 需 的 intro 类 是 为 了 在 不 影 
响 页 面 中 其 他 元 素 样式 的 情况 下 , 给 该 div 中 的 段落 和 链接 设置 样式 而 引入 的 ( 如 图 10.6.1 至 图 10.6.4 所 示 ) 








但 需要 记 住 的 是 ， 该 值 应 该 是 相对 于 这 
些 元 率 的 父 元 素 的 。 在 这 个 例子 中 ， 它 们 的 
父 元 素 是 p。 段 落 的 字体 大 小 是 17px， 而 不 
是 16px， 因 此 要 让 lem = 17px， 前 面 说 过 ， 
lem 应 该 始终 等 于 父 元 素 的 字体 大 小 。 

因此 ， 要 让 链接 显示 为 16px， 需 要 设置 
一 个 比 lem 大 的 em 值 : 

16 / 17 = .941176 

因此 ， 使 用 这 个 有 点 元 长 的 .intro a { 
fontsize: 0.941176em; } 将 得 到 想 要 的 结果 ( 数 
字 太 长 了 不 好 看 ,因此 小 数 点 后 我 省 略 了 几 位 )。 











使 用 rem 设置 字体 大 小 

CSS3 引入 了 一 些 新 的 单位 ， 其 中 很 有 
意思 的 一 个 便 是 rem (root em 的 简称 ) 。 它 
同 em 很 像 ， 不 过 它 总 是 以 根 元 素 为 参照 系 
设置 其 他 元 素 的 字体 大 小 ， 而 不 是 父 元 素 ， 
次 OO tn 
包含 body， 也 就 包含 了 所 有 内 容 ) 。 

这 样 做 简化 了 字体 大 小 的 设置 ， 为 
html 的 字体 大 小 通 溃 不 会 变 ， 不 像 父 元 素 的 
大 小 是 不 确定 的 ， 就 像 在 段落 中 设置 链接 字 
体 大 小 的 例子 那样 。 (参见 “理解 em 和 百 
分 数字 体 大 小 ”部 分 。) 因 此 ,我 们 的 公式 (在 





最 后 需要 指出 的 是 ， 在 大 多 数 情 况 下 ， 
100% 的 body font-size 等 于 16px。 不 过 有 
一 种 例外 的 情况 ， 即 用 户 对 浏览 妖 的 设置 窗 
盖 了 该 默认 值 。 例 如 ， 如 果 用 户 是 视 障 人 士 ， 
他 们 可 能 将 默认 字体 大 小 设置 为 22px。 将 
body 设置 为 100%， 页 面 就 会 以 此 为 基准 设 
置 其 余 的 文本 的 相对 大 小 。 这 是 使 用 em 和 百 
分 数 设 置 字 体 大 小 的 美 之 所 在 。( 如 果 你 将 
html 元 素 设置 为 100%， 同 样 的 道理 也 适用 于 
rem。 ) 参见 最 后 一 条 提示 ， 了 解 使 用 em 的 
更 多 原因 。 

















前 面 公式 的 基础 上 调整 而 米 ) 为 : 

要 指定 的 字体 大 小 / 根 元 素 字 体 大 小 = 值 

实际 上 就 是 

要 指定 的 字体 大 小 / 16 = 值 

en 

先 别 着 急 ， 虽 然 现 代 浏览 器 对 它 的 支持 
程度 很 高 ， 但 Internet Explorer 直到 IE9 才 开 
始 支 持 它 (http://caniuse.com/#search=rem ) 。 
在 世界 上 很 多 地 方 ，IE8 仍然 占据 较 大 的 市 
场 份额 ， 建 站 时 不 得 不 考虑 对 其 兼容 。 这 也 
是 很 多 代码 编写 人 员 尚 未 使 用 rem 的 原因 。 
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， 有 一 种 策略 就 是 针对 旧版 本 的 下 
览 器 准备 的 rem 值 (如 图 10.6.7 所 示 ) 。 
然 ， 这 样 做 的 一 个 缺点 是 ee 
和 浏览 器 需要 加 载 的 代码 量变 多 了 。 另 一 个 
缺点 是 ， 在 IE8 中 如 果 文 本 的 字体 大 小 是 以 
像素 为 单位 的 , 用 户 就 无 法 改变 文字 的 大 小 。 
诚然 ， 这 会 影响 一 小 部 分 用 户 。 请 你 自己 权 
衡 并 作出 取 低 。 


2. 指定 特定 字体 大 小 
(1) 输入 font-size:。 





(2) 在 冒号 (:) 后 输入 准确 的 字号 ， 如 
13px( 关于 像 双 示例， 参见 图 10.6.1 ) 。 
或 者 使 用 关键 字 指 定 字 体 大 小 ， 即 使 用 


xx-small 、x-small、small、medium、1]arge、 
Xx-large 或 xx-large。 


关于 单位 的 详细 信息 ， 参 内 





风 7.5 六 。 


数字 与 单位 之 间 不 应 有 任何 空格 。 


9 如 果 以 像素 为 单位 设置 字体 大 小 ， 使 
用 Internet Explorer 的 访问 者 将 无 法 使 用 浏览 
器 的 文本 大 小 选项 对 文本 进行 放大 或 缩小 。 
这 是 要 用 em 或 百分比 控制 字体 大 小 的 原因 之 


一 。 从 IE7 开始 , 访问 者 可 以 对 整个 网 页 放 
0 不 过 这 跟 只 改变 文字 大 小 不 同 。 


今 ， 对 于 大 多 数 网 站 来 说 ， 编 码 人 员 已 经 
ee 因为 这 两 个 版 本 
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html { 
font-size: 100%; /* 通常 是 16px */ 


} 


NEG 1 
font-size: 17px; /* 可 选 */ 


font-size: 1.0625rem; /* 17px/16px */ 


} 


.intro a { 
font-size: 16px; /* 可 选 */ 
font-size: 1irem; /* 是 .941176em */ 


图 10.6.7 使 用 rem， 则 只 用 关心 根 元 系 的 字 
体 大 小 ， 而 不 必 关 心 链接 的 父 元 素 p 的 字体 大 
小 。 由 于 根 元 素 (html ) 设置 为 100% (通常 为 
16px ) ， 则 将 a 元素 设置 为 Irem， 则 表示 其 字体 
De te Gp 
式 表 示 可 以 提供 一 个 以 像素 为 单位 的 字体 大 小 ， 
从 而 为 IE8 及 其 他 不 支持 rem 的 旧 浏 览 需 提供 备 
选 方案 





的 浏览 器 用 户 已 经 非常 少 了 。 不 过 ， 蕉 至 本 
书写 作 之 时 ， 在 中 国 还 有 25% 的 用 户 使 用 
IE6， 要 查看 它 在 世界 各 地 的 份额 ， 可 以 访问 


WWww.lie6countdown.com。 


二 于 不 同 的 浏览 器 对 关键 字 的 解释 方式 可 
能 有 所 不 同 。 


磅 (pt ) 用 做 打印 样式 表 的 单位 。 
JS font-size 属性 是 继承 的 。 


3. 根据 父 元 素 设 置 字体 大 小 

(1) 输入 font-size:。 

(2) 在 冒号 (: ) 后 输入 相对 值 ， 如 1.5em 
或 150% (em 和 百分数 示例 参见 图 10.6.4 ) 。 

或 者 使 用 相对 关键 字 ， 即 使 用 larger 或 
smaller ( 这 种 用 法 没有 百分数 常见 ， 而 百 分 
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数 又 没有 em 篆 见 ) 。 


4. 根据 根 元 素 设 置 字体 大 小 

(1) 输入 font-size:。 

(2) 在 冒号 (:) 后 输入 相对 值 ， 如 
0.875rem (rem 示例 参见 图 10.6.7 ) 。 


父 元 素 的 字体 大 小 可 能 是 由 用 户 (上 比 
较 少 见 ) 或 设计 人 员 设 置 的 ， 可 能 是 从 父 元 
素 继承 的 ， 也 可 能 来 自 浏览 器 的 默认 设置 。 

上 文 已 经 提 到 ， 大 多 数 浏览 器 对 body 元 素 设 
置 的 默认 字体 大 小 为 16 像素 。 


设置 了 相对 字体 大 小 的 元 素 的 子 元 素 
会 继承 这 个 大 小 ， 而 不 是 继承 相对 值 。 因 此 ， 
p (参见 图 10.6.6 ) 中 a 元 素 会 继承 1 像素 的 
字体 大 小 (参见 图 10.6.4) ， 而 不 是 相对 值 
0.937Sem。 链 接 将 显示 为 15px， 除 非 被 其 他 
样式 履 盖 。 


可 以 将 字体 大 小 同 其 他 字体 值 一 起 进 
行 设置 。 参 见 10.7 节 。 


关于 在 设计 网 页 过 程 中 使 用 em 优 于 
使 用 像素 ，Chris Coyier 给 出 了 多 种 原因 ， 参 
见 http://css-tricks.com/why-ems/。 


10.7 ”设置 行 高 

行 高 指 的 是 段落 的 行距， 即 段 落 内 每 行 
之 间 的 距离 ， 参 见 图 10.7.1 和 图 10.7.2。 使 用 
大 一 些 的 行 高 有 时 候 会 使 主体 文本 更 容易 阅 
读 。 对 于 超过 一 行 的 标题 ， 使 用 较 小 的 行 高 
则 会 让 它们 看 起 来 更 美观 。 








..。 省 略 前 面 的 CS5S ... 


a + 
line-height: 1.45; 


} 


.intro .subhead { 
font-size: 1.125em; 


} 


.intro p { 
font-size: 1.0625em; 


} 


.project p { 
font-size: .9375em; /* 15px/16px */ 
line-height: 1.65; /* 15px*1.65 = 
NX 





10.7.1 假设 body 元素 默认 大 小 为 16 像素 ， 
.project 类 p 元素 的 字体 大 小 为 0.9375em， 即 15 
像素 。 行 高 将 是 15 像素 的 1.65 倍 ， 即 大 约 24.75 
像素 。 我 还 设置 了 .intro 容器 的 行 高 ， 它 会 被 后 
代 元 素 继 承 





Antoni Gaudi = Introduction 


;; AntoniGaudi— Introduction a PS ry 
ICas5' TIS SCArvIl TU SITTIRITCIEY aocu UIT HID val SIU 


observations of nature are quite apparent in his work, 
from the Park Guell and its incredible sculptures and 
mosaics, to the Church of the Sacred Family and its 
organic, bulbous towers, 


La Sagrada Familia 


The complicatedly named and curiously unfinished masterpiece 
that is the Expiatory Temple of the Sacred Family is the most 
visited building in Barcelona. In it, Gaudi combines his vision of 
nature and architecture with his devotion to his faith. His focus 





10.7.2 使 用 1line-height 拉 大 行距 可 以 使 其 更 
容易 阅读 。 在 这 个 例子 中 ， 撕 部 的 主 文本 之 间 的 行 
距 要 比 顶部 的 intro 文本 之 间 的 行距 明显 大 
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设置 行 高 的 步骤 

(1) 输入 line-height:。 

(2) 输入 n， 这 里 的 n 是 一 个 数字 ， 它 与 
元 素 的 字体 大 小 相 乘 ,得 出 需要 的 行 高 。( 这 
是 最 为 第 用 的 方法 , 即 一 个 没有 单位 的 数字 。) 

或 者 输入 a， 这 里 的 3 是 以 em、 像 系 或 
磅 〈 仅 在 打印 样式 表 中 使 用 磅 ) 为 单位 的 但 。 

或 者 输入 p%， 这 里 的 p% 是 字体 大 小 的 百 


如 果 使 用 数字 设 定 行 高 (通常 都 这 么 
做 ) ， 那 么 所 有 的 子 元 素 都 会 继承 这 个 因子 。 
因此 ， 如 果 父 元 素 的 字体 大 小 是 16 像素 (或 
以 em 等 表示 的 等 价 大 小 ) ， 行 高 是 1.5， 则 
该 元 素 的 行 高 就 是 24 ( 即 16x1.3) 像素 。 如 
果子 元 素 的 字体 大 小 是 10 像素 ， 则 该 元 素 的 
行 高 就 是 15 ( 即 10x1.5) 像素 。 

















如 果 使 用 百分数 或 em 值 ， 那 么 只 会 
继承 产生 的 行 高 ( 即 计算 出 来 的 值 ) 。 因 此 ， 
如 果 父 元 素 的 字体 大 小 是 16 像素 ， 行 高 是 
150%， 则 该 元 素 的 行 高 就 是 24 像素 。 所 有 的 
子 元 素 都 将 继承 24 像素 的 行 高 ， 不 管 字 体 大 
小 是 多 央 。 


根据 下 一 节 将 要 讲 到 的 ， 可 以 将 行 高 
跟 字 体 、 大 小 、 粗 细 、 字 体 样 式 和 变 体 一 起 
进行 设置 。 


10.8 同时 设置 所 有 字体 值 


可 以 使 用 font 简写 属性 同时 设置 字体 样 
式 、 粗 细 、 变 体 、 大 小 、 行 高 和 字体 系列 ， 
参见 图 10.8.1 和 图 10.8.2。 这 种 方法 要 比 单独 
声明 各 个 属性 高 效 ， 因 此 采用 这 种 方法 可 以 
保持 样式 表 人 简洁 。 

使 用 font 简写 属性 不 要 求 指定 所 有 字体 
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属性 ， 但 至 少 应 该 包含 字体 大 小 和 字体 系列 
属性 。 图 10.8.1 中 的 两 个 注释 说 明了 不 能 使 
用 简写 属性 的 情况 。 


body { 
font: 100% Geneva, Tahoma, Verdana, 
; sans-serif; 


/* 这 些 声 明 无 法 使 用 font 简 记 法 ,除非 同时 
声明 字体 大 小 */ 
font-family: "Gill Sans", "Gill Sans MT", 
Calibri, sans-serif; 
font-weight: normal; 


} 
hi { font-size: 2.1875em; } 
h2 { font-size: 1.75em; } 


em, 

a:link, 

.intro .subhead { 
font-weight: bold; 

} 


.intro { 
line-height: 1.45; 
} 


.intro .subhead { 
font-size: 1.125em; 


} 


“ntro p+ 
font-size: 1.0625em; 


} 


.project p { 
/* 这 些 声明 无 法 使 用 font 简 记 法 ， 除 非 同时 
声明 字体 系列 */ 
font-size: .9375em; 
line-height: 1.65; 





10.8.1 这 个 样式 表 与 图 10.7.1 中 的 样式 表 是 等 
效 的 ， 其 效果 如 图 10.8.2 所 示 。 这 里 只 是 将 body 的 
字体 属性 放 在 了 一 条 font 声明 中 。 代 码 中 无 法 将 
hi、h2 或 .project 类 p 元 素 的 字体 属性 放 入 font 中 ， 
为 font 简写 属性 至 少 应 该 包括 字体 系列 和 字体 
大 小 属性 。 更 多 示例 参见 图 10.8.3 和 图 10.8.4 
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Antoni Gaudi - Introduction 


Barcelona's Architect 


Antoni Gaudi's incredible buildings bring 
millions of tourists to Barcelona each year. 


Gaudi's non-conformity, already visible in his teenage 
years, coupled with his quiet but firm devotion to the 
church, made a unique foundation for his thoughts and 
ideas. His search for simplicity, based on his careful 
observations of nature, is quite apparent in his work, 
from the Park Guell and its incredible sculptures and 
mosaics, to the Church of the Sacred Family and its 
organic, bulbous towers. 


La Sagrada Familia 


The complicatedly named and curiously unfinished masterpiece 
that is the Expiatory Temple of the Sacred Family is the most 
visited building in Barcelona. In it, Gaudi combines his vision of 
nature and architecture with his devotion to his faith. His 
focus on this project was so intense that he shunned all other 
projects, slept in an apartment at the work site surrounded by 





10.8.2 ”这 个 页 面 与 图 10.7.2 是 相同 的 


.example-2 { 
font: .875em/1.3 "Palatino Linotype”， 
* Palatino, serif; 





10.8.3 这 是 一 个 结合 了 font-size、line- 
height 和 font-family 声明 的 font 人 简 记 法 的 例子 。 
行 高 跟 在 字体 大 小 和 一 个 斜 杠 后 面 。font 简写 属性 
中 还 可 以 包含 font-style、font-variant 和 font- 
weight， 参 见 图 10.8.4 


.example-3 { 
font: italic small-caps bold .875em/1.3 


» "Palatino Linotype", Palatino, serif; 





10.8.4 这 个 例子 中 包含 了 所 有 可 能 的 属性 。 只 
要 font 中 声明 了 字体 大 小 和 字体 系列 属性 ， 其 他 
属性 可 以 任意 组 合 。 前 三 个 属性 的 次 序 无 关 紧 要 





同时 设置 所 有 字体 值 的 步骤 

(1) 输入 font :。 

(2) 可 选 步 又， 输入 normal、italic 或 
oblique 以 设置 字 型 (参见 10.4 市 ) 。 

(3) 可 选 步骤 ， 输 入 nornal、bold、 
bolder、lighter 或 100 的 倍数 (最 大 到 
900 ) 以 设置 粗细 (参见 10.5 市 ) 。 

(4) 可 选 步 台 , 输入 normal 或 small-caps 
来 取消 或 设置 小 型 大 写字 母 (参见 10.15 广 ) 。 

(5) 可 选 步骤 ,输入 需要 的 字体 大 小 ( 参 
见 10.6 节 )。 

(6) 如 果 需 要 ， 输 入 /1ine-height， 这 里 
的 1ine-height 是 行 与 行 之 间 的 距离 ( 参见 
1087 7 

(7) 输入 一 个 空格 ， 再 按 优先 次 序 输入 需 
要 的 字体 系列 ， 以 逗号 分 隔 (参见 10.2 市 ) 。 


必须 始终 显 式 地 声明 字体 大 小 和 字体 
系列 属性 : 先是 字体 大 小 ， 再 是 字体 系列 。 











行 高 是 可 选 的 ， 但 它 如 果 出 现 ， 就 必 
须 紧 跟 在 字体 大 小 和 斜 杠 后 面 ( 参见 图 10.8.3 
和 图 10.8.4) 。 


第 (2) ~ (4) 步 中 的 属性 可 以 按 任意 
顺序 指定 ( 参见 图 10.8.4 ) ， 也 可 以 忽略 ( 参 
见 图 10.8.1 和 图 10.8.3 ) 。 如 果 忽 略 它 们 ， 它 
们 就 被 自动 设 为 normal， 而 这 也 许 不 是 你 想 
要 的 。 


font 属性 是 继承 的 。 
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可 以 修改 网 页 中 文本 的 颜色 。 我 们 的 样 
式 表 可 以 包含 颜色 名 称 、 十 六 进 制 仁 、RGB、 
HSL、RGBA 和 HSLA 值 的 任意 组 合 来 定义 
颜色 ， 参 见 图 10.9.1 和 图 10.9.2。 关 于 各 种 颜 
色 值 的 信息 参见 7.5 节 中 的 “CSS 颜色 ”。 








body { 
color: blue; 
font: 100% Geneva, Tahoma, Verdana, 
— sans-serif; 


color: #7d717c; 
font-size: 1.75em; 


“i Pe a 
a:link { 
color: 


#e10000; /* a red */ 


} 


a:visited { 
color: #b44f4f; 


} 


a:hover { 
color: 


} 


“intro 二 
color: 


#fdb09d; /* 略 市 粉色 */ 


} 


.intro a:hover { 
color: #fec4b6; 


} 


10.9.1 在 body 元 系 中 设置 页 面 的 默认 文本 颜 
色 ， 这 样 所 有 的 元 素 都 会 继承 设置 (1ink 除外 ) 。 
再 在 相应 元 素 中 设置 特殊 需求 的 颜色 ( 如 我 在 h2 
es 。 注意 ，a:hover 颜色 (#foo ) 使 用 了 

条 提示 中 说 到 的 缩写 ( 为 展示 效果 ， eau, 
子 中 的 body 元 素 使 用 了 蓝 色 - 后 面 不 会 保留 这 
设置 ) 
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Barcelonas Architect 


Antoni Gaudi's incredible buildings bring millions 
of tourists to Barcelona each year. 


Gaudis non=-conformity, already visible in his teenage 
Year COUpled with his guiet but firm devotion to the 
ehureh, made a unigue foundation for his thoughts and 
Ideas. His search for slmplliclty, based on his careful 
ohservations of nature are quite apparent im hls work, 
from the Pary Gu arnd its Ineredible sculptures and 
mosaies, to the Chureh of the Sncred Familly ared its 
oanic, bulbous towers. 


La Saerada Familia 


The complleatedhy named and curiousty unfinished masterplece 
That 1s the Expliatory Tempile of the Sacred Famlily ls the most 
visited building in Barcelona, In it, Gaudi eombines his vision of 
niture md arehitesture with his devotion te his faith. His fodus 
mr this project Was 56 Intense that he shunned all other 
projects, slept in an apartment at the work alte surrounded by 
plans and drawings, and so completely igrnored his disshewveled 
appearances that whrens im 1 926, he Was struck by a Streetcar in 
front of the church, he was mistaken for an indigent ard rought 
tn a hospital for the poor where he tied soon thereafter. 


The Sagado Famillla attracts even the non-rellglous to lts doors 
In large part che to thls tragte story and hs still urhnished states, 
of Which the everpresent scafttolding and erares are permanernt 
remlnders. Burt thera ls something more, In the Segrada Familia, 
Gnudl again brings nature and architecture together—the 
Saring shires ook something lke rsing stalagmites in mn 
Underground cave—this me ln reveranee. 


Park Guall 


The Park Guell always reminds me of the character Howard Roark 
in Ayn Rand's The Fovuntainhead. Gaudl's prolect In the Park 
Guall was to build a reaidential eommunity whose residents 
would love where they lved, lt was newer finishaed, 


Perhaps that ia for the best, since row we all dat to enjoy it. 
The Park Guell is sat on a hill overiooking practieally all of 
Barcelona. ts beautiful and even cormftortable serpentine bench 
证 fhed with foreigners and locals alike every dy of the week, tts 
mosaic Nzard has become synonymous with the city Htsetf, 


10.9.2 不 出 所 料 ， 扎 眼 的 蓝 色 应 用 到 了 页 面 的 
大 部 分 文本 中 ，hz2 标题 采用 中 度 灰色 (#7d717c ) 
履 盖 了 设置 。 页 面 顶 部 .intro 区 域 中 粉红 色 
(#fdb09d ) 的 链接 覆盖 了 默认 的 红色 〈#e10000 ) 
链接 。 下 一 节 应 用 背景 颜色 后 我 会 将 这 里 的 文本 
设 为 白色 ， 不 过 现在 不 行 ， 现 在 设置 成 白色 就 看 不 
到 了 
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设置 颜色 的 步骤 

(1) 输入 color:。 

(2) 输入 colorname ， 这 里 的 colorname 是 
预定 义 颜色 中 的 一 种 。 

或 者 输入 困 rggbb， 这 里 的 因 rggbb 是 颜 
色 的 十 六 进 制 呈现 。 这 是 最 常用 的 指定 颜色 
I 

或 者 输入 rgb(r,，g，4b), 其 中 rr、g、b 
是 0 ~ 255 之 间 的 整数 ， 分 别 表示 所 需 闫 色 
里 红 、 绿 、 蓝 的 量 。 

或 者 输入 rgb(r1%，g%，b%)， 其 中 r、g、 
分 别 是 所 需 颜色 里 红 、 绿 、 蓝 的 百分数 。 

或 者 输入 hs1(h7，s，7)， 其 中 及 是 0~360 
之 间 的 数值 ， 表 示 所 需 颜 色 的 色相 ; s 和 1 
均 是 百分数 ， 分 别 表 示 所 需 颜 色 的 饱和 度 和 
亮度 。 ( 一般 来 说 ， 对 于 不 透明 颜色 ， 使 用 
十 六 进 制 数 或 RGB 值 更 好 。 ) 

或 者 输入 rgba(r, g，b，a), 其 中 r、g、 
b 是 0 ~ 255 之 间 的 整数 ， 分 别 表 示 所 需 颜 色 
里 红 、 绿 、 赣 的 量 ; a 是 0~1 之 间 的 小 数 ， 表 
示 所 需 颜 色 的 alpha 透明 度 。 

或 者 输入 hsla(h，s，1，a)， 其 中 bp 是 
0 ~ 360 之 间 的 数值 ， 表 示 所 需 颜 色 的 色相 ; 
s 和 2 了 均 是 上 百分数， 分 别 表示 所 需 颜 色 的 饱和 
度 和 亮度 ; a 是 0 ~ 1 之 间 的 小 数 ， 表 示 所 需 
颜色 的 alpha 透明 度 。 

如 果 输 入 的 r、g 或 b 的 值 大 于 255， 就 
会 使 用 255。 类 似 地 ， 高 于 100% 的 百分数 将 
被 蔡 换 为 100%。 


当 十 六 进 制 数值 由 三 对 重复 的 数字 组 
成 时 ， 还 可 以 使 用 拉 gb 设置 颜色 。 事 实 上 ， 
我 推荐 使 用 这 种 方法 。 因 此 ， 可 以 ( 且 应 该 ) 
将 #EF0099 写 做 #F09 或 #f09。 类 似 地 ， 可 
以 将 #CC0000 写成 #C00 或 #c00。 但 是 不 能 将 




















#31AA55 写成 扫 1a5 ,因为 只 有 两 对 值 是 重复 的 。 


记 住 ，Internet Explorer 在 IFE9 之 前 的 
版 本 不 支持 HSL、RGBA 和 HSLA， 因 此 ， 
如 果 要 在 颜色 声明 中 使 用 这 些 记 法 ， 就 需要 
为 下 的 旧版 本 定义 备用 颜色 。 详 细 说 明 参 见 
7.5 节 中 的 “CSS 颜色 ”。 


图 10.16.2 展示 了 :hover 链接 即将 激 
活 的 效果 。 
除了 link 元 素 ， 其 他 元 素 都 会 继承 


body 元 素 中 的 color 属性 。 开 发 人 员 必 须 显 
式 设 置 link 元素 的 color 属性 ， 如 图 10.9.1 
所 示 。 


10.10 ”设置 背景 


我 们 在 设置 背景 样式 时 有 很 多 选择 。 可 
以 为 单个 元 素 设置 育 景 ， 可 以 为 整个 页 面 设 
置 育 景 ， 还 可 以 为 上 述 二 者 的 任意 组 合 设置 
背景 。 如 此 , 便 可 以 对 几 个 段落 、 几 个 单词 、 
不 同 状 态 的 链接 、 内 容 区 域 等 修改 背景 。 总 之 ， 
几乎 可 以 对 所 有 元 素 应 用 育 景 样式 ， 甚 至 是 
表单 和 图 像 。 ( 是 的 ， 你 没 看 错 ， 图 像 也 可 
以 有 背景 网 像 ! ) 

设置 育 景 有 很 多 属性 可 以 利用 ， 包 


括 background-color、background-image、 











background-repeat 、background-attachment 及 
background-position 等 。 还 可 以 使 用 background 
人 简 记 法 ， 该 属性 将 上 述 属 性 合并 了 ， 可 以 市 
省 大 量 的 输入 。 本 节 将 介绍 这 些 属 性 。 

我 们 将 首先 为 本 章 一 二 在 使 用 的 示例 页 
面 浴 加 背景 颜色 ， 然 后 介绍 一 些 额外 的 与 至 
景 相关 的 例子 以 深入 探讨 这 一 主题 。 


1. 修改 文本 的 背景 颜色 
(1) 输入 background:。 
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(2) 输入 transparent (表示 人 允许 透 过 父 
元 素 的 背景 颜色 ) 或 color， 这 里 的 color 是 
颜色 名 称 、 十 六 进 制 数值 ， 或 RGB 、HSL、 
RGBA HSLA 颜色 值 (参见 10.9 节 第 (2) 步 )， 
如 图 10.10.1 ~ 图 10.10.6。 十 六 进 制 值 颜色 是 
最 为 常用 的 。 





body { 
background-color: #88b2d2; 
font: 100% Geneva, Tahoma, Verdana, 
— sans-serif; 


hi 并 
background-color: #eaebef; 


color: #7d717c; 
font-size: 1.75em; 


} 


.intro { 
background-color: #686a63; 
color: #fff; 
line-height: 1.45; 








图 10.10.1 除了 那些 单独 设置 背景 颜色 的 元 素 之 
外 ， 对 body 元 率 设 置 青 景 颜 色 就 是 为 整个 页 面 设 
置 背 景 颜色 。intro 类 div 元 素 的 背景 设置 将 其 与 
页 面 的 其 他 部 分 区 别 开 来 ， 参 见 图 10.10.2 


.architect { 


background-color: #fff; 


} 


10.10.3 包含 所 有 内 容 的 article 元 系 有 
class="architect"， 因 此 这 段 CSS 将 让 它 拥 有 白 
色 的 背景 (但 一 些 部 分 除外 ) ， 如 图 10.10.4 所 示 
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Mean Gilndi = [nanoducdidn 


Barcelona's Architect 


Antoni Gaudi's incredible buildings bring millions of tourists to 
Barcelona each year. 


Gaudrs non-confornmity, already visible in his teenage years, coupled with his 
oulet but firm devotion to the church, made a unbque fourudation for his 
thoughts and deas. His search Tor dimplicity, based on his careful observations 
af nature are ouite apparent in his work, from the Park Guell and its ineredible 
sculptures and mosaics, to the Church of the Sacred Family and its organic, 
bulbonrs Lowears. 


La Sagrada Familia 


等 葵 话 


图 10.10.2 ”整个 页 面 (body 元 素 ) 的 背景 颜色 
为 浅 蓝 色 ， 有 两 处 浅 蓝 色 背景 被 其 他 颜色 履 盖 : 
intro 类 div 的 柠 色 和 背景， 以 及 二 级 标题 的 浅 灰 色 


刁 纪 上 忆 . 
月 所 


rte Galaadl | 二 ET 


Barcelona's Architect 


Antoni Gaudi's incredible buildings bring millions of tourists to 
Barcelona each year. 


Gaudrs non-confornmity, already visible in his teenage years, coupled with his 
四 et but firm devotion to the church made aunigque foundation for his 
thoughts and Ideas. His search for simplicity, based on hes careful observatlons 
af nature are quite apparent in his work, from the Park Guell and its ineredible 
sculptures ard mosaics, to the Church of the s mily and its organic, 
bulbows towers, 


La Sagrada Familia 


» EF T 
ep ji 
- | 

| | a 
[ 时 二 -Wh Fr 


The complicatedly named and curiously unfnished masterpiece that is the Expiatory 
emple of the Sacred Family is the most visited buikdirg In Barcelona, In tt, Gawdi 
oines his vislon of nature ard oe with hls devotlar to hls falth, His focus on 


i 





图 10.10.4 白色 填充 了 吉 个 内 容 区 域 。 -ntiro 区 
域 和 h2 也 是 architect 类 article 的 后 代 ， 如 果 
之 前 没有 为 它们 添加 不 同 的 背景 (如 图 10.10.1 所 
示 ) ， 它 们 的 背景 也 应 该 是 白色 的 。 在 .architect 
article 的 外 围 还 能 看 到 浅 蓝 色 的 body 这 是 
由 于 浏览 器 默认 为 body 设置 了 一 些 外 边 
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.architect { 
background-color: #fff; 
padding: 1.5em 1.75em; 


} 


.intro { 
background-color: #686a63; 
color: #fff; 
line-height: 1.45; 
padding: 1px 1.875em .7em; 


图 10.10.5 这 里 用 到 了 一 个 下 一 章 才 会 讲解 到 的 
属性 (参见 11.8 节 ) ,希望 读者 们 原 诬 我 


Antoal Caudi — ntroduction 


Barcelona's Architect 


Antoni Gaudfs incredible buildings bring millions of 
tourists to Barcelona each year- 


Gaudis non-conformity, already visible in his teenage years, coupled 
with his quiet but firm devotion to the church, made a unique 
foundation for his thoughts and Ideas. His search for simplicity, 
based on his careful observations of nature are quite apparent in his 
work, from the Pa I and its Incredible sculptures and mosaics, 
to the Church of the Sac and its organic, bulbous towers. 


La Sagrada Familia 


Ee Pa 人 YY - 


The comedicatedly named and Curiously unfnished fnasterpiaece that is the Expiatory 

Temple of the Sacred Family is the most visited bullding in Barcelona. in it, Gaud 

combines his vision of nature and architecture with his devotion to his faith. His focus 
图 10.10.6 添加 一 点 点 内 边 距 就 能 让 页 面 大 不 一 
样 ， 现 在 ， 页 面 看 起 来 舒服 多 了 





2. 使 用 背景 图 像 作 为 背景 

(1) 输入 background-image:。 

(2) 输入 url(image.png)， 这 里 的 image. 
png 是 图 像 相 对 于 样式 表 所 在 位 置 的 路 径 和 文 
件 名 ， 参 见 图 10.10.7。 或 者 输入 none， 表 示 
不 使 用 图 像 ， 如 background-image: none; (只 
有 在 履 兰 应 用 背景 图 像 的 元 系 的 样式 时 才 会 








使 用 这 个 声明 ) 。 


body { 
background-color: #ccc; 


background-image: url(bg-pattern.png); 





图 10.10.7 图 像 URL 反映 的 是 样式 表 相 对 于 图 像 
的 位 置 。 这 里 仅 作 简单 处 理 ， 更 多 信息 参见 第 二 条 








提示 。 这 里 我 希望 图 像 能 填充 整个 页 面 ， 但 , 不必 
设置 background-repeat， 因 为 背景 图 像 默认 就 是 
重复 的 (如 图 10.10.8 所 示 ) 。 访 问 者 只 有 在 图 像 
加 载 速度 慢 ( 例如 在 移动 连接 环境 下 ) 或 图 像 由 于 
某 些 原因 没有 加 载 成 功 时 ， 才 会 看 到 背景 颜色 


Barcelona's Architect 


Antoni Gaudi's incredible 
buildings bring millions of 
tourists to Barcelona each year- 


Gaudfs non-conformity, already 
visible in his teenage years, coupled 


with his quiet but firm devotion to the 
er E 





sj Cd i Fr natin fo 


图 10.10.8 ”背景 图 像 (上 ) 包含 一 个 漂亮 的 图 案 。 
将 背景 图 像 添 加 到 页 面 主体 后 ， 它 会 在 水 平和 竖 直 
两 个 方向 上 不 断 重 复 。 我 将 内 容 变 窗 了 一 些 ， 以 便 
看 清 效 果 


3. 重复 背景 图 像 


输入 background-repeat: direction， 这 
里 的 direction 可 以 取 四 个 值 : repeat、 
repeat-x、repeat-y 和 no-Tepeat, 它们 分 别 代 
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表 同 时 横向 和 纵 癌 重复 图 像 (参见 图 10.10.8 ) 、 


只 横向 重复 图 像 (参见 图 10.109 ~ 图 10.10.12)、 min-height: 100%; 

只 纵 回 重复 图 像 、 不 重复 网 像 。 忽 略 background- } 

repeat 相当 于 将 其 设 为 默认 值 repeat， 参 见 body { 

图 10.10.7 background-color: #000; 





body { . 
background-image: url(sky.png); 10.10.11 在 图 10.10.9 的 基础 上 设置 背景 色 ， 


background-repeat: repeat-x; 该 背景 色 会 在 痛 景 图 像 不 绑 盖 的 区 域 显示 出 来 。 这 
background-position: left bottom; 里 还 添加 了 一 条 规则 ， 让 html 元 素 的 最 小 高 度 为 
… 浏览 器 窗口 高 度 的 100%, 如 图 10.10.12 所 示 ( 注意 : 

如 果 将 background-attachment 的 值 设 为 fixed， 

10.10.9 这 次 我 们 希望 图 像 人 在 水 平方 向 (X 。。 这 一 条 规则 就 可 以 省 咯 ,下 面 很 快 就 会 讲 到 这 一 点 ) 
轴 ) 重复 。 重 复 的 开始 位 置 是 页 面 的 左上 角 。 注 意 

这 里 没有 提供 背景 i 


Li; Backg i; Background image repeat-x 






































Background image repeat-x 





Ba Background repeats 
hol horizontally 


Black Black background color fills in space above image. 





10.10.12 ”黑色 (#000 ) 背景 色 与 图 像 顶 端的 
黑色 完美 地 融合 在 一 起 。 现 在 ， 你 可 以 看 到 那些 文 
本 了 ! 这 张 图 是 由 两 个 训 览 需 窗 口 截图 合成 的 ， 这 





























@A Background image repeat-x 两 个 窗 器 的 高 度 是 一 样 的 。 如 果 没 有 为 html 元 系 
che eg ores LL , 添加 图 10.10.11 中 的 规则 ， 效 果 就 如 左 图 所 示 ， 硼 
景 图 像 的 底部 位 于 文字 下 面 一 点 的 位 置 ( 因为 页 面 
在 那个 位 置 结束 了 ) ， 因 此 黑色 背景 色 会 显示 在 它 
et 的 下 面 。 为 见 彩 插 
horizontally 
White background color fills in space above image. 4. 控制 背景 图 像 是 否 随 页 面 滚动 
(1) 输入 background-attachment : 。 
10.10.10 “这 张 背景 图 像 (上 ) 由 黑色 向 蓝 色 (2) 输入 fixed( 代码 如 图 10.10.13 所 示 )， 








再 向 绿色 渐变 ， 很 适合 水 平 重 复 。 不 过 它 的 高 度 不 “背景 图 像 会 附着 在 浏览 器 窗口 上 (也 就 是 说 
足以 填充 整个 页 面 ， 在 不 设置 背景 色 的 情况 下 显得 即使 访问 者 滚动 页 面 ， 图 像 仍 会 继续 显示 
很 难看 。 那 一 行文 字 其 实 并 没有 被 切 制 ， 看 不 见 它 。 参 几 图 101014) ， 或 scroll 访问 关注 池 
的 上 半 部 分 是 因为 它 的 颜色 与 默认 的 背景 色 一 样 ， II ， 代 


都 是 白色 。 男 见 彩 插 页 面 时 背景 图 像 会 移动 ， 参 见 图 10.10.15; 
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或 local， 只 有 访问 者 深 动 背景 图 像 所 在 的 
元 素 ( 而 不 是 整个 页 面 ) 时 ， 背 景 图 像 才 
移动 。 忽 略 此 项 ， 浏览 如 通常 会 使 用 默认 值 


scroll ) 。 


body { 
background-color: #000; 
background-image: url(sky.png); 
background-repeat: repeat-x; 


background-attachment: fixed; 
background-position: left bottom; 





10.10.13 ”配合 我 们 设置 的 background-position， 
背景 图 像 将 从 浏览 疾 窗 口 的 左下 角 开 始 水 平 重复 


Background image scroll 


Background image scroll | 十 | 





horizontally 


Black background color fills in space above image. 


Another paragraph. 


Yet another paragraph. 
And yet another paragraph. 


Na ever stnn9312 











Background image fixed 


Background image fixed | 5 
i 


horizontally 


Black background color fills in space above image. 
Another paragraph. 

Yet another paragraph. 

And yet another paragraph. 

Will this ever stop?!? 

Annoarantlhs nt 


图 10.10.14 无 论 页 面 中 有 多 少 内 容 ， 无 论 用 户 
如 何 滚动 页 面 ， 背 景 图 像 固定 不 动 





全 日 日 Background image scroll 


Background image scroll 





Apparently not. 

Another paragraph. 
Another paragraph. 
Another paragraph. 
Another paragraph. 








图 10.10.15 这 是 图 10.10.14 所 示 的 页 面 在 不 设置 background-attachment: fixed; 情况 下 的 显示 效 采 。( 不 
设置 该 规则 等 价 于 设置 background-attachment: scroll;， 因 为 scroll 是 默认 值 。) 背景 图 像 的 位 置 根据 
内 容 的 长 度 而 变 ， 因 此 ， 直 到 滚动 到 页 面 的 最 底部 ， 才 能 看 到 背景 图 像 ( 如 右 图 所 示 ) 


5. 指定 元 素 背 景 图 像 的 位 置 

输入 background-position x y ， 其 中 x 
和 “可 以 表示 为 距离 左上 角 的 绝对 距离 或 百 
分 数 ， 如 图 10.10.16 所 示 ， 如 20px 147px( 允 
许 负 值 )。 也 可 以 用 1left( 左 对 齐 ) 、 center( 居 
中 ) 或 right ( 右 对 齐 ) 表示 x， 用 top( 顶 
端 对 齐 )、center( 居中 ) 或 bottom( 底 端 对 齐 ) 
表示 y， 如 图 10.10.13 所 示 。 如 果 两 个 值 都 使 
用 关键 字 表 示 ， 那 么 两 者 的 顺序 无 关 紧 要 ， 
如 top right 跟 right top 一 样 。 





body { 
background: #004 url(../img/ufo.png) 
no-repeat 170px 20pX; 


color: greenyellow; 





10.10.16 现在， 我们 使 用 background 简 记 法 
将 所 有 这 些 单独 的 声明 压缩 成 一 条 规则 。 不 使 用 
background-position， 而 是 将 水 平和 竖 直 属性 值 直 
接 写 在 最 后 。 注 意 ， 使 用 no-repeat 会 让 图 像 仅 显 
示 一 次 ， 不 重复 显示 《如 图 10.10.17 所 示 ) 
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@ee 
: Background image positioned 


Background image positioned 








10.10.17 UFO 出 现在 距离 页 面 左 边缘 170 像 
素 ， 距 离 上 边缘 20 像素 的 位 置 ， 从 而 为 绿色 文本 
腾 出 空间 。 图 像 的 空白 区 域 都 是 透明 的 ( 光束 则 有 具 
有 alpha 透明 度 ) ， 因 此 它 可 以 和 深蓝 色 的 body 背 
景色 融合 在 一 起 








6. 在 一 条 声明 中 设置 所 有 背景 属性 

(1) 输入 background:。 

(2) 指定 任何 可 接受 的 background 属性 
值 (从 “修改 文本 的 背景 闫 色 ” 到 “指定 元 
素 背 景 图 像 的 位 置 ” 介 绍 的 内 容 都 适用 ) 。 
这 些 值 的 排列 顺序 没有 要 求 ( 如 图 10.10.16 
所 示 ) 。 


尽管 大 部 分 例子 都 是 对 body 样式 所 
做 的 修改 ,但 实际 上 你 可 以 为 几乎 所 有 的 
HTML 元 素 添 加 背景 。 





为 了 让 例子 变 得 简单 ， 背 景 图 像 URL 
均 使 用 基本 的 URL。 实 际 上 ， 你 的 URL 可 能 
是 类 似 于 .img/ufo.png ( 如 图 10.10.16 所 示 ) 

的 形式 ， 因 为 通常 会 避免 将 图 像 与 样式 表 放 
在 同一 个 目录 里 。 本 书 配 套 网 站 上 针对 本 章 
的 例子 均 使 用 如 图 10.10.18 所 示 的 文件 夹 结 
构 ， 因 此 CSS 中 的 背景 图 像 URL 也 会 做 相应 
调整 。 





国 | 号 Wi 把 ,民生 5 
F 国 img 


国 pattern.pnd 
图 sky.png 
LUfopna 
辆 | example.html 
10.10.18 在 这 样 的 结构 中 ，style.css 中 显示 至 


景 图 像 的 声明 可 能 形 如 background: url(../img/ 
pattern.png);。 更 多 信息 参见 1.7 市 








background-color 的 默认 值 是 transparent 
(透明 ),background-image 的 默认 值 是 none( 无 )， 
background-repeat 的 默认 值 是 Yepeat( 重复 )， 
background-attachment 的 默认 值 是 scroll( 深 
动 ) ，background-position 的 默认 值 是 0 0 

(等 价 于 top left， 即 左上 角 ) 。 只 有 在 需 
要 履 盖 其 他 样式 规则 的 时 候 才 会 显 式 地 指定 默 
认 值 。 


EC 通常， 尽量 使 用 background 简 记 法 。 
使 用 该 简 记 法 的 时 候 , 不 必 指 定 所 有 的 属性 。 
例如 ， 在 实践 中 ， 图 10.10.7 中 的 规则 通常 写 
作 background: #ccc url(bg-pattern.png);。 
不 过 需要 注意 的 是 ， 在 简 记 法 中 ,任何 没有 
指定 的 属性 都 将 设置 为 默认 值 ， 这 有 可 能 会 
覆盖 先前 定义 的 样式 。 


默认 情况 下 ， 元 素 的 背景 会 填充 其 
内 容 和 内 边 距 所 在 的 区 域 (如 图 10.10.5 和 
图 10.10.6 所 示 ) ， 并 延伸 到 边框 的 边缘 ( 参 
见 11.$ 市) 。 可 以 通过 background-clip 改变 
这 种 规则 (参见 补充 材料 “更 多 CSS3 的 背景 
控制 ”) 。 
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在 CSS3 中 ，background-attachment 文本 和 背景 之 间 应 有 足够 的 对 上 比 度 。 
还 可 以 设置 成 local。Lea Verou 的 一 篇 文章 et 帮助 普通 用 户 ， 对 视力 障碍 的 
演示 了 该 属性 值 的 效果 ( 参见 http://lea.verou. 访问 者 尤其 重要 (参见 http://contrastrebellion. 
me/2012/04/background-attachment-local/ ) 。 com ) 。 这 里 我 们 再 次 提 到 Lea Verou， 他 创 
支持 该 属性 值 的 浏览 器 仅 包括 IE9+、 建 了 一 个 帮助 选择 颜色 的 工具 ， 使 用 该 工具 
Chrome、Safari 和 Opera (没有 Firefox ) 可 以 选择 对 比 度 符合 无 障碍 访问 指南 要 求 的 
5 闫 色 。 

可 以 在 background-position 属性 

中 使 用 负数 。 例 如 ，background-position: 如 果 图 10.10.14 中 不 使 用 background- 
-45px 80px 会 将 图 像 定 位 在 元 素 左 边 外 侧 45 position: left bottom; ， 那 么 效果 是 相反 的 。 
像素 (因此 不 会 看 到 图 像 在 水 平方 向 上 的 头 J ne 页 面 的 顶端 水 平 重复 ( 顶 
45 个 像素 ) 、 顶 部 内 侧 80 像素 。 端 是 默认 位 置 ) 。 当 页 面向 下 深 动 时 ， 该 背 
je 有 景 图 像 就 会 er 开 我 们 的 视野 。 


更 多 CSS3 的 背景 控制 
CSS3 提供 了 更 多 的 背 最 效果 。 本 书 将 在 第 14 草 介 绍 渐变 背景 和 多 重 背 最 。 
background-clip 和 background-origin 两 个 属性 分 别 控制 元 素 背 景 显 示 的 范围 和 开始 的 
位 置 。 这 两 个 属性 都 接受 相同 的 值 : content-box 包含 内 容 ，padding-box 包含 内 容 和 内 边 距 ， 
border-box 包含 内 容 、 内 边 距 和 边框 (参见 11.5 节 ) 。background-clip 的 默认 值 为 border- 
box， 而 background-origin 的 默认 值 则 为 padding-box。 更 多 信息 参见 http://css-tricks.com/ 
transparent-borders-with-background-clip/。 
background-size 属性 可 以 通过 以 下 属性 值 控 制 背景 图 像 的 显示 尺寸 。 
口 contain: 在 显示 图 像 完 整 宽度 和 高 度 的 情况 下 , 尽 可 能 地 扩大 图 像 的 尺寸 。 使 用 该 值 ， 
背景 图 像 可 能 不 会 填充 整个 背景 区 域 。 
口 cover: 在 填充 元 素 整 个 背景 区 域 的 情况 下 ， 让 图 像 尽 可 能 地 小 。 使 用 该 值 ， 图 像 的 
一 部 分 可 能 会 超出 元 素 的 范围 ， 因 而 不 可 见 。 
口 一 个 长 度 、 百 分 数 或 auto: 如 background-size: 250px 400pXx; 或 background-size: 
50% 50%j 。 
关于 该 属性 的 更 多 信息 参见 www.css3.info/background-size/。 该 属性 擅长 巧 用 Sprite ( 参 
os 
大 多 数 关于 新 的 背景 样式 的 讨论 都 可 以 在 www.sitepoint.com/new-properties-and-values- 
inbackgrounds-with-css3/ 找到 。 





@ 2013 年 10 月 发 布 的 Firefox 25 版 已 支持 该 属性 值 。 一 一 译 者 注 
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10.11 控制 间距 


可 以 增加 或 减少 单词 之 间或 字母 之 间 的 
距离 ， 前 者 称 为 字 间 距 (tracking ) ， 后 者 称 
为 字 偶 距 ( kerning ) ， 参 见 图 10.11.1。 





body { 
background-color: #88b2d2; 
font: 100% Geneva, Tahoma, Verdana, 
— sans-serif; 


font-family: "Gill Sans", "Gill Sans MT", 
—» Calibri, sans-serif; 


font-weight: normal; 


/* 出 于 演示 目的 进行 临时 设置 */ 
letter-spacing: 7pX; 


font-size: 2.1875em; 


.其 他 CSS ... 





10.11.1 这 里 为 标题 的 字母 之 间 添 加 了 7 像素 
的 额外 间距 ，letter-spacing 的 效果 非常 明显 了 。 
在 后 面 的 例子 中 我 会 将 这 个 值 缩小 为 1 像素 


1. 指定 字 间 距 
输入 word-spacing: length, 这 里 的 length 
是 一 个 市 单位 的 数字 ， 如 0.4em 或 5px。 


2. 指定 字 偶 距 
输 入 letter-spacing: length， 这 里 的 


length 是 一 个 市 单位 的 数 子 ， 如 0.4em 或 5px。 


可 以 对 单词 间距 和 字母 间距 使 用 负数 。 
单词 间距 和 字母 间距 的 值 还 可 能 受到 
所 选 的 对 齐 方式 ( 用 text-alignment 设置 ) 
和 字体 系列 的 影响 。 
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Barcelona's Architect 


Antoni Gaudi's incredible buildings bring 
millions of tourists to Barcelona each year. 


Gaudi's non-conformity, already visible in his teenage 
years, Ccoupled with his qulet but firm devotion to the 
church, made a unique foundation for his thoughts and 
ideas, His search for simplicity, based on his careful 
observations of nature are quite apparent in his work, 
from the P: and its incredible sculptures and 
mosaics, to the Church of the Sacre y and its 
organic, bulbous towers. 





La Sagrada Familia 





10.11.2 ”标题 中 字母 之 间 的 距离 变 大 了 。 将 这 
里 的 字母 间距 跟 图 10.10.6 图 中 的 字母 间距 进行 比 
较 ， 很 容易 看 出 效果 。 不 过 ， 后 续 例子 不 会 保留 这 
里 的 设置 














要 将 字母 间距 和 单词 间距 设 为 默认 值 
( 即 不 添加 额外 的 间距 ), 可 以 使 用 normal 或 0。 


如 果 要 使 用 em 值 ， 那 么 只 有 结果 大 
小 ( 即 “ 计 算出 来 的 值 ”) 会 被 继承 。 因 此 ， 
如 果 父 元 素 字 体 大 小 为 16 像素 ， 额 外 的 单词 
间距 为 0.1lem， 则 每 个 单词 之 间 的 额外 间距 为 
1.6 像素 。 同 时 ， 所 有 子 元 素 每 个 单词 之 间 也 
有 1.6 像 素 的 额外 间距 ， 不管 它 们 的 字体 大 小 
是 多 少 。， 如 果 要 窗 盖 继承 的 值 ， 可 以 显 式 地 
为 子 元 素 设置 间距 。 


word-spacing 和 letter-spacing 属性 
是 继承 的 。 


10.12 ”添加 缩 进 


通过 设置 text-indent 属性 ， 可 以 指定 
段落 第 一 行 前 面 应 该 空 出 多 大 的 空间 ， 如 
图 10.12.1 和 图 10.12.2 所 示 。 
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hy, 
h2 { 


font-family: "Gill Sans", "Gill Sans MT ， 


— Calibri, sans-serif; 
font-weight: normal; 
letter-spacing: 1px; 


.project p { 
font-size: .9375em; /* 15px/16px */ 
line-height: 1.65; 
text-indent: 2em; /* 30px */ 


。 其 他 [CSS ... 








10.12.1 这 段 代 码 为 p 元 素 添 加 了 2em 的 
缩 进 。 由 于 0.9375 的 字体 大 小 等 于 15 像 素 
( 15/16=0.9375 ) ， 因 此 这 个 缩 进 约 为 30 像素 ( 参 
见 图 10.12.2 ) 


Bn bonl Eu Inrreducden 
Lil Rn TE DO WE Wiiesl ee | EN SIL 


The Sagrada Famllia attracts even the non-religious to its 
doors in large part due to this tragic story gnd its still unhnished 
state, of whlch the everpresent seatffoldineg arvdl crarnes are 
permanent reminders. But there is sormething more. In the 
Sagrada Familia, Gaudi again brings nature and architecture 
together—the scaring spires look sgmething [ke rising 
stalagmites In an underground cave—thls time In reverance. 


Park Guell 


The Park Guell ahways reminds me of the character Howard 
Roark in Ayn Rand's The Fountainhead. Gaudi's project in the 
Park Guall was to bulld a residential communlty whose residernts 
Would love whare they lhved. lt was never finlshed. 


bl ha is for the best, nce Now We a to re it, 





图 10.12.2 Pp 30 et 


增加 缩 进 的 方法 
输入 text-indent: length, 这 里 的 length 
是 一 个 市 单位 的 数字 ， 如 1.5em 或 18px。 
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我 们 可 以 为 其 他 元 素 应 用 text- 
indent 属性 ， 而 不 仅 是 段落 元 素 。 但 默认 情 
况 下 对 em、strong、cite 等 内 联 元 素 没有 效 
果 。 可 以 将 它们 设置 为 display: block; 或 
display: inline-block;， 就 可 以 强制 为 其 应 
用 text-indent 属性 。 


使 用 负数 会 产生 悬挂 缩 进 。 使 用 悬挂 
缩 进 时 ， 可 能 还 需要 增加 文字 框 周围 的 
距 或 外 边 距 ， 从 而 让 容器 可 容纳 伸 到 外 边 
文本 (参见 11.8 节 和 11.10 节 ) 。 


与 通常 情况 一 样 ， ee 
we (参见 图 10.12.1 ) ， 
分 数 要 根据 父 元 素 的 宽度 进行 计算 。 


text-indent 属性 是 继承 的 。 
如 果 要 使 用 百分数 或 em 值 ， 那 么 
大 小 ( 即 “ 计 算出 来 的 值 ” 本 
因此 ， 如 果 父 元 素 为 300 像素 宽 ， 那 么 10% 
的 text-indent 就 是 30 像素 ， 同 时 ， 所 有 子 
元 素 第 一 行 也 都 会 缩 进 30 像素 ， 而 不 管 它们 
各 . 目 父 元 素 的 宽度 是 多 消 O 
要 忽略 继承 的 缩 进 


， 使 用 0 即 可 。 


10.13 ”对 齐 文本 


根据 需要 ,可 以 让 文本 左 对 齐 、 右 对 齐 、 
居中 对 齐 或 两 端 对 齐 ， 参 见 图 10.13.1。 


对 齐 文 本 的 步骤 

(1) 输入 text-align:; 

(2) 输入 left 让 文本 左 对 齐 ; 

或 者 输入 right 让 文本 右 对 齐 ; 

或 者 输入 center 让 文本 居于 屏 篆 的 中 间 |; 
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或 者 输入 justify 让 文本 两 端 对 齐 。 


h1，h2 { 
font-family: "Gill Sans", "Gill Sans MT", 
—» Calibri, sans-serif; 
font-weight: normal; 
letter-spacing: 1px; 
text-align: center; 


p 1{ 
} 


text-align: justify; 


.intro .subhead { 
font-size: 1.125em; 
text-align: center; 


。 其 他 [CSS ... 








图 10.13.1 有 的 文本 会 居中 对 齐 ， 但 大 多 数 文本 
都 会 两 端 对 齐 ， 参 见 图 10.13.2 


Barcelona's Architect 


Antoni Gaudi's incredible buildings bring millions 
of tourists to Barcelona each year- 


Gaudr『s non-conformity, aliready visible in his teenage 
years, Coupled with his quiet but fm devotion to the 
church, made a unique foundation for his thoughts and 
ideas. His search for simplicity, based on his careful 
observations of nature are quite apparent in his work, 
from the ell and is incredible sculptures and 
mosaics, to the Church of the fed ard its 
organic, bulbous towers. 


La Sagrada Familia 


The compllicatedly naemed and curiously unhnished masterplece thar 
is the Explatory Tempile of the Sacred Family is the most visited buliding 
in Barcelona. In ft, Gaudi combines his vision of nature and architecture 
with his devotion to his faith, His focu5 on this Project was 50 intense 





10.13.2 ”做 出 更 改 以 后 ， 标 题 和 .subhead 段落 
变 成 届 中 对 齐 ， 其 他 段落 文本 为 两 端 对 齐 。 之 前 为 
段落 设置 的 text-indent 值 保 留 下 来 了 。 注 意 : 我 
删除 了 第 二 个 标题 下 面 的 图 像 ， 以 便 你 能 从 这 个 图 
中 看 到 更 多 文本 
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如 果 选 择 让 文本 两 端 对 齐 ， 要 注意 单 
词 间距 和 字母 间距 有 可 能 受到 严重 的 影响 。 
更 多 信息 参见 10.11 节 。 


text-align 对 适用 于 盒 模 型 的 元 
素 ( 如 hl ~ h6、p 等 ， 显 示 为 单独 的 行 ) 
来 说 是 起 作用 的 ， 但 对 短语 内 容 元 素 (如 
strong、em、a、cite 等 ， 显 示 在 行内 ) 来 说 
则 不 起 作用 ,除非 将 它们 的 显示 改 为 块 级 ,( 短 
语 内 容 元 素 在 HTML5 之 前 称 为 “行内 ”元 素 ， 
参见 1.9 节 。) 为 了 让 短语 内 容 元 素 中 的 文 
字 对 齐 ， 区 别 于 周边 的 文本 ， 必 须 先 将 它们 
默认 的 display: inline; 样式 改 为 display: 
block; 或 display: inline-block; (前 者 会 
让 它们 像 段落 一 样 显示 为 单独 的 行 ) ， 然 后 
再 设置 相应 的 text-align 值 。 对 于 设置 了 
display: inline-block; 的 元 素 ， 需 要 设置 一 
定 的 宽度 才能 看 到 对 齐 效果 。 实 际 上 ， 需 要 
为 “行内 ”元 素 设 置 text-align 属性 的 情况 
是 非常 少见 的 。 


text-align 属性 是 继承 的 。 它 的 默认 
值 取决 于 文档 的 语言 和 书写 系统 (从 右 到 左 
或 从 左 到 右 ) ， 不 过 在 大 多 数 情况 下 ， 它 会 
被 不 加 区 分 地 设置 为 左 对 齐 。 


10.14 ”修改 文本 的 大 小 写 


使 用 text-transform 属性 ， 可 以 为 样式 
定义 文本 的 大 小 写 (参见 图 10.14.1 ) 。 通 过 
这 种 方法 ， 可 以 将 文本 显示 为 首 字 母 大 写 、 
全 部 大 写 (参见 图 10.14.2 ) 、 全 部 小 写 或 按 
原样 显示 。 
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body { 
background-color: #88b2d2; 
font: 100% Geneva, Tahoma, Verdana, 
—» sans-serif; 


font-family: "Gill Sans", "Gill Sans MT", 
> Calibri, sans-serif; 

font-weight: normal; 

letter-spacing: 1px; 

text-align: center; 


font-size: 2.1875em; 
text-transform: uppercase; 


.其 余 的 C55 ... 





图 10.14.1 将 一 级 标题 显示 为 全 部 大 写 ， 以 便 突 
出 它 ， 代 码 实 现 参见 图 10.14.2 





BARCELONA'S ARCHITECT 


Antoni Gaudi's incredible buildings bring milliens 
of tourists to Barcelona each year. 


Gaudi's non-conformity, already wvisible in his teenage 
years, Coupled with his quiet but firm devotion to the 
| 
ideas. His Search for gimplicity, based on his careful 
ubservations of nature are quite apparent in his work, 
| 
mosaics, to the Church of the Sacrad Wly and its 
organic, bulbous towers. 


La Sagrada Familia 








图 10.14.2 现在， 一 级 标题 真 的 很 醒目 ， 二 级 标 
题 没 有 改变 


修改 文本 大 小 与 的 步骤 
(1) 输入 text-transform: 。 


(2) 在 冒号 (:) 后 输入 capitalize 让 每 
个 单词 的 首 字 母 大 写 ; 

或 者 输入 uppercase 让 所 有 字母 大 写 ; 

或 者 输入 lowercase 让 所 有 字母 小 写 ; 

或 者 输入 none 让 文本 保持 本 来 的 样子 ( 可 
以 用 来 取消 继承 的 值 ) 。 


capitalize 属性 值 有 它 的 局 限 性 

它 并 不 了 解 一 门 语言 里 按照 惯例 | 首 字母 不 
应 该 大 写 的 单词 ， 它 只 是 简单 地 让 每 个 单 
词 首 字母 大 写 。 因 此 ，HTML 中 的 文本 Jim 
Rice enters the Hall of Fame 将 显示 为 Jim Rice 
Enters The Hall Of Fame。 





二 了 玩 ” 玩 然 可 以 改 交 HTML 里 的 文本 ， 为 什 
么 还 要 用 text-transform 呢 ? 这 是 因为 ， 有 
时 ， 内 容 是 你 无 法 控制 的 。 例 如 ， 内 容 可 能 
ck 
闻 源 。 在 这 些 情况 下 ， 只 能 通过 CSS 控制 文 
本 的 大 小 写 。 搜 索引 擎 通常 是 按 它 在 HTML 
时 输入 的 样子 索引 文本 的 。 在 搜索 结果 里 显 
示 标 准 的 大 小 写 会 更 容易 阅读 。 


lowercase 属性 值 可 以 用 来 创建 特殊 的 
标题 样式 ( 想象 自己 是 诗人 ee.cummings 2 ) 。 


text-transform 属性 是 继承 的 。 


10.15 ”使 用 小 型 大 写字 母 


很 多 字体 都 有 对 应 的 小 型 大 写字 母 变 体 ， 
其 中 一 些 字 母 是 大 写 的 ， 但 缩小 到 了 小 写字 
母 的 大 小 。 可 以 使 用 font-variant 调用 小 型 
大 写字 母 变 体 (参见 图 10.15.1 ) 。 





J 美国 诗人 E. E. Cummings 的 一 些 作 品 全 部 使 用 小 写字 母 署 名 ， 即 e.e. cummings。 一 一 译 者 注 
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font-family: "Gill Sans", "Gill Sans MT", 
~» Calibri, sans-serif; 

font-weight: normal; 

letter-spacing: 1px; 

text-align: center; 


font-size: 2.1875em; 
text-transform: uppercase; 


h2 { 
background-color: #eaebef; 
color: #7d717c; 
font-size: 1.75em; 
font-variant: small-caps; 


.其 余 的 C55 ... 


10.15.1 这 里 为 h2 设 置 了 small-caps， 如 图 
10.15.2 所 示 。 不 要 忘记 font-variant 和 small- 


> AAA 


caps 中 的 连 字 符 (-) 


LA SAGRADA FAMILIA 
PARK GUELL 


图 10.15.2 ”现在 可 以 看 到 h2 中 每 个 字母 的 小 型 大 
写 版 本 。 小 型 大 写字 母 在 不 同 浏览 需 中 的 显示 效果 
稍 有 不 同 








1. 使 用 小 型 大 与 字母 的 方法 


输入 font-variant: small-caps。 


2. 取消 小 型 大 与 字母 的 方法 

输入 font-variant: none。 
与 简单 地 缩小 字号 的 大 写字 母 相 比 ， 
小 型 大 写字 母 显 得 更 为 轻巧 。 
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并 非 所 有 的 字体 都 有 对 应 的 小 型 大 写 
字母 设计 。 如 果 浏 览 器 没有 找到 这 种 设计 ， 
那么 它 有 几 种 选择 : 可 以 简单 地 缩小 大 写字 
母 的 尺寸 来 模拟 小 型 大 写字 母 ( 这 会 使 它们 
显得 有 点 矮 胖 ) ， 也 可 以 完全 忽略 小 型 大 写 
宇 母 ， 并 将 它们 显示 为 全 部 大 写 〈 就 像 订 面 
描述 的 text-transform: uppercase 那样 ) 。 


font-variant 属性 是 继承 的 。 


10.16 ”装饰 文本 


可 以 使 用 text-decoration 属性 装饰 文 
本 , 如 次 加 下 划 线 或 者 其 他 类 型 的 线条 。 目前 ， 
最 第 用 到 这 个 属性 的 情况 是 为 链接 状态 添加 
样式 ， 参 见 图 10.16.1 和 图 10.16.2。 





1. 装饰 文本 的 步 又 

(1) 输入 text-decoration:。 

(2) 在 冒号 ( : ) 后 输入 underline 以 添加 
下 划 线 ; 

或 者 输入 overline 以 添加 上 划 线 ; 

或 者 输入 line-through 以 添加 删除 线 。 


2. 取消 文本 装饰 的 方法 
输入 text-decoration: none;。 


除了 a 元 素 外 ， 也 可 以 为 其 他 元 素 应 
用 text-decoration 属性 。 


人 对 于 正常 情况 下 有 装饰 的 元 素 ( 如 a、 
del、ins ) 以 及 从 父 元 素 继承 了 装饰 样式 的 元 
素 ， 可 以 取消 它们 的 装饰 。 
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body { 
background-color: #88b2d2; 
font: 100% Geneva, Tahoma, Verdana, 
» sahs-serif; 


l 


h1i, h2 { 
font-family: "Gill Sans", "Gill Sans MT", 
— Calibri, sans-serif; 
font-weight: normal; 
letter-spacing: 1px; 
text-align: center; 


font-size: 2.1875em; /* 35px/16px */ 
text-transform: uppercase; 


[2 
background-color: #eaebef; 
color: #7d717c; 
font-size: 1.75em; /* 28px/16px */ 
font-variant: small-caps; 


} 
p { text-align: justify; } 


em， 

a:link, 

.intro .subhead { 
font-weight: bold; 


} 


.architect { 
background-color: #fff; 
padding: 1.5em 1.75em; 





图 10.16.1 
套 网 站 上 的 代码 版 本 包含 了 更 多 注释 
| on his careful observations of nature are quit 


from the Park Guell and its incredible sculptu 
3 Church of the Sacred Family and its organic, 





The Park Guell always re 
The Fountainhead. Gaudi's 
community whose residents w! 





图 10.16.2 











( 接 左 栏 ) 


.intro { 
background-color: #686a63; 
color: #fff; 
line-height: 1.45; 
padding: 1px 1.875em .7em; 
上 


.intro .subhead { 
font-size: 1.125em; /* 18px/1i6px */ 
text-align: center; 


} 


.intro p { 
font-size: 1.0625em; /* 17px/16px */ 


} 


.project p { 
text-indent: 2em; 
font-size: .9375em; /* 15px/16px */ 
line-height: 1.65; 

} 


a:link { 
color: #e10000; 
text-decoration: none; 


} 
a:visited { color: #b44f4f; } 


a:hover { 
color: #f00; 
text-decoration: underline; 


} 


.intro a { color: #fdb09d; } 
.intro a:hover { color: #fec4b6; } 





这 是 本 章 所 使 用 的 完整 的 样式 表 ， 包 括 改变 链接 样式 的 text-decoration， 参 见 图 10.16.2。 配 


1 on his careful observations of nature are quit 
from the Park Guell and its incredible sculptu 
s Church of the 232Gred Family and its organic, 


The Park Guell always re 
inhead. Gaudi's 


The Fou 
community whose residents 





在 最 上 面 的 图 中 ,对 认 状态 下 所 有 链接 午 没 有 下 划 线 。 鼠 标 悬 停 在 链接 上 时 又 会 出 现下 划 线 ， 


且 链 接 文 本 的 颜色 会 更 完 一 些 ， 它 们 提醒 访问 者 可 以 进一步 采取 行动 
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将 链接 的 下 划 线 去 掉 固 然 很 好 ， 但 是 
必须 用 别 的 方式 将 链接 与 周围 的 内 容 进行 区 
分 (参见 图 10.16.1 和 图 10.16.2 ) ， 否 则 访问 
者 就 无 法 知道 它们 是 可 激活 的 链接 。 


10.17” 妈 置 空 日 属性 


默认 情况 下 ，HTML 文档 里 的 多 个 空 
格 和 回 车 会 显示 为 一 个 空格 ,或 者 被 忽略 。 
如 果 要 让 浏览 器 显示 这 些 额 外 的 空格 ， 可 以 
使 用 white-space 属性 ， 参 见 图 10.17.1 和 
图 10.17.2。 


.intro { 
background-color: #686a63; 
color: #fff; 
line-height: 1.45; 
padding: 1px 1.875em .7em; 


} 


.intro .subhead { 
font-size: 1.125em; 


/* 出 于 演示 目的 进行 的 临时 设置 */ 
color: lime; 

text-shadow: 3px 2px 2px black; 
white-space: nowrap; 


。 其 余 的 CSS ... 





图 10.17.1 这 里 阻止 了 .subhead 段落 文本 断 行 ， 
是 为 了 突出 nowrap 在 深 色 和 浅 色 背景 下 的 影响 ， 
参见 图 10.17.2。14.5 节 会 讲解 text-shadow 属性 


设置 空白 属性 的 步骤 

(1) 输入 white-space:; 

(2) 输入 pre， 以 让 浏览 絮 显 示 原 文本 中 
所 有 的 空格 和 回 和 车 ; 


10.17 设置 空白 属性 201 
或 者 输入 nowrap, 确保 所 有 空格 不 断 行 ， 
也 就 是 文本 全 部 显示 在 一 行 ; 
或 者 输入 normal, 按 正 常 方式 处 理 空 格 。 


Antoni Gaudi = Introduction 
i Antoni Gaudi - Introduction 


Pp 


Barcelona's Architect 


Gaudfis non-conformity, already visible in his teenage 
years, coupled with his quiet but firm devotion to the 





图 10.17.2 ” .subhead 段落 文本 不 会 断 行 ， 即 使 浏 
览 器 窗口 太 罕 不 足以 显示 整 行文 本 。 这 样 ， 页 面 会 
添加 一 个 水 平 滚 动 条 ， 以 便 用 户 能 通过 滚动 查看 其 
余 文 本 








white-space 属性 的 pre 值 的 名 称 来 
源 于 pre 元 素 ( 参见 第 4 章 ) ， 该 元 素 以 等 
宽 字 体 显 示 其 包含 的 文本 ， 并 保留 所 有 的 空 
格 和 回 车 。 不 过 ，white-space: pre; 不 会 用 


8 如 果 为 图 10.17.1 中 的 .intro.subhead 
规则 添加 overflow: hidden; text-overflow: 


ellipses; ,超出 元 素 盒 的 文本 会 显示 为 省 略 号 。 


在 具有 white-space: nowrap 样式 的 
元 素 中 ， 可 以 使 用 br 元 素 手 动 创 建 换 行 。 尽 
管 如 此 ， 还 是 要 尽量 避免 使 用 br， 除 非 没 有 
更 好 的 选择 ， 因 为 这 样 做 会 在 HIML 中 混合 
表现 ， 而 不 是 让 CSS 控制 它 。 关 于 br 元 素 的 
更 多 信息 参见 4.16 节 。 
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用 CSS 进行 布局 


本 章 内 容 
口 开始 布局 的 注意 事项 
口 建立 页 面 结 构 


口 在 旧版 浏览 带 上 为 HTMLS5 元 素 添 加 Sunny East Garden at the 
a Getty Villa 


样式 
吕 对 默认 样式 进行 重 置 或 标准 化 
口 盒 模型 
D 控制 显示 类 型 和 元 素 的 可 见 性 
口 设置 元 系 的 高 度 和 宽度 
口 添加 元 素 周围 的 内 边 路 re ee ee 


ne Drtty, rmiki ng Lhe esp ier rly necaaitabl TH deve th tr ci te 














0 RE 

口 设置 元 素 周 围 的 外 边 距 en = 

DR The City Named After Wo 

口 控制 元 素 浮 动 的 位 置 多 

口 对 元 素 进行 相对 定位 Wy er 

口 对 元 素 进行 绝对 定位 3 EE 

口 在 栈 中 定位 元 素 bll 四 
Ea pr he 


DD 处 理 洲 出 er er ene ys 。 Etakserfesl mm Mumich: Thao Fariy 


Bar The King's [Daughter = 


口 垂 耳 对 齐 元 素 Pe 
口 修改 鼠标 指针 ao meee 





图 11.0.1 这 个 页 面包 含 两 栏 、 一 个 页 由 和 一 个 页 
可 以 使 用 CSS 创建 各 种 各 标的 布局 。 本 。 脚 ， 它 是 用 CSS 进行 布局 的 。CSS 具有 强大 的 改变 


章 将 演示 如 何 创 建 一 种 常见 的 布局 : 顶部 有 ”页 面 外 观 的 功能 。 这 个 页 面 的 设计 相当 简单 ， 以 内 
一 个 报头 ， 中 间 是 两 栏 内 容 ， 底 部 有 一 个 页 。 容 为 重点 。 本 章 一 步 步 地 介绍 了 如 何 构 建 该 布局 ， 
脚 ， 如 图 11.0.1 所 示 。 不 过 ,使 用 即将 讲 到 我 们 还 会 在 第 二 剖 将 这 个 页 面 做 成 响应 式 Web 页 面 


的 CSS 属性， 还 可 以 创建 截然 不 同 的 布局 。 
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本 草 和 下 一 章 是 相互 关联 的 。 为 了 绥 解 
学 习 曲 线 ， 本 草 演 示 了 创建 固定 宽度 布局 的 
方法 ， 不 过 你 学 到 的 大 部 分 知识 也 适用 于 其 
他 布局 。 在 第 12 革 中 ， 我 们 会 学 习 如 何 将 这 
个 页 面 做 成 响应 式 Web 页 面 。 

在 本 章 中 ， 不 会 将 CSS 的 每 一 行 都 显 
示 出 来 。 例 如 ， 大 部 分 文本 格式 化 都 在 前 
面 完 成 了 。 完 整 的 代码 见 www.htmlcssvqgs. 
com/8ed/11/finished-page。 所 有 这 些 文件 ( 尤 
其 是 样式 表 ) 中 都 包含 了 大 量 的 注释 ， 用 以 
对 代码 进行 解释 。 


11.1 开始 布局 的 注意 事项 


下 面 列举 的 一 些 要 点 有 助 于 对 网 站 进行 
布局 ， 并 在 发 布 之 前 对 网 站 进行 调整 。 


1. 内 容 与 显示 分 离 

之 前 的 章节 已 经 提 到 过 了 ， 不过， 由 于 
这 是 构建 网 页 的 根本 ， 因 此 有 必要 再 次 强调 
一 下 。 作 为 最 佳 实践 ,应 始终 保持 内 容 ( HTML ) 
与 显示 (CSS ) 分 离 。 第 8 章 介 绍 了 如 何 通 过 
外 部 样式 表 实 现 这 一 点 。 如 果 对 所 有 的 页 面 
都 这 样 做 ， 就 可 以 共享 相同 的 布局 和 整体 样 
式 ， 而 只 在 具体 页 面 设 置 差 异 即 可 。 




















2. 布局 方法 
网 站 设计 主要 有 两 大 类 型 : 固定 宽度 和 
叮 应 式 


口 对 于 固定 ( fixed ) 布局 ， 整 个 页 面 和 
每 一 栏 都 有 基于 像素 的 宽度 。 顾 名 思 
义 ， 无 论 是 使 用 移动 电话 和 平板 电脑 
等 较 小 的 设备 查看 页 面 ， 还 是 使 用 条 
面 浏览 右 并 对 窗口 进行 缩小 ， 它 的 宽 
度 都 不 会 改变 。 要 知道 ， 你 访问 过 的 
大 部 分 网 站 都 使 用 固定 布局 。 在 引入 
啊 应 式 Web 设计 之 前 ， 这 是 大 多 数 网 
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站 选用 的 布局 方式 。 尽 管 使 用 固定 布 
局 的 网 站 的 比例 在 减少 ， 但 这 种 布局 
仍 很 常见 ， 尤 其 是 公司 网 站 和 大 有 牌 网 
站 。 上 此外， 固定 布局 也 是 学 习 CSS 时 
最 容易 掌握 的 布局 方式 ， 这 也 是 本 章 
演示 这 种 布局 的 原因 。 
口 了 响应 式 页 面 也 称 为 流 式 (fluid 或 
liquid ) 页 面 , 它 使 用 百分数 定义 宽度 ， 
人 允许 页 面 随 显 示 环 境 的 改变 进行 放大 
或 缩小 。 除 了 具有 流动 栏 ， 啊 应 式 页 
面 还 可 以 根据 屏幕 尺寸 以 特定 方式 调 
整 其 设计 。 例 如 ， 可 以 更 改 图 像 大 小 
或 者 调整 每 一 位， 使 其 大 小 更 合适 。 
这 就 可 以 在 使 用 相同 HTML 的 情况 下 ， 
为 移动 用 户 、 平 板 电 脑 用 户 和 吕 面 用 
户 定制 单独 的 体验 ， 而 不 是 提供 三 个 
独立 的 网 站 。 
没有 一 种 布局 方式 可 以 适用 于 所 有 的 
情景 。 不 过 ， 随 者 智能 手机 和 平板 电脑 的 广 
沁 出 现 (更 别提 我 们 目前 还 不 知道 ， 但 未 来 
一 定 会 出 现 的 各 种 不 同 尺 寸 的 设备 ) ， 有 必 
要 将 网 站 做 成 啊 应 式 布局 。 这 也 是 每 天 者 
有 大 量 响应 式 网 站 出 现 的 原因 。 上 文 已 经 提 
到 ， 我 们 将 在 下 一 草 学 习 如 何 创 建 啊 应 式 
网 站 。 


















































3. 浏览 器 注意 事项 

并 非 所 有 的 访问 者 都 使 用 同样 的 浏览 带 ， 
同样 的 操作 系统 ， 甚 至 同样 的 设备 访问 你 的 
网 站 。 因 此 ， 大 多 数 情况 下 ， 在 将 网 站 放 到 
服务 硕 上 发 布 之 前 ， 通 稼 需要 在 很 多 浏览 硕 
上 对 页 面 进 行 测试 。 推 厦 在 开发 过 程 中 就 用 
几 个 浏览 侣 对 页 面 定期 进行 测试 ， 这样 ， 在 
最 后 进行 全 面 测试 时 ， 碰 到 的 问题 就 会 少 一 
些 。 关 于 如 何 对 页 面 进 行 测 试 ， 以 及 测试 用 
浏览 锅 的 有 关 信 息 ， 参 见 20.2 市 。 
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响应 式 Web 设计 的 起 源 

Ethan Marcotte 创建 了 术语 “响应 式 
Web 设计 ” (responsive Web design ) ， 并 
向 大 家 介绍 了 创建 响应 式 网 站 的 技术 。 人 们 
首次 广泛 关注 这 种 方法 始 于 他 发 表 在 A List 
Apart 上 的 文章 ( www.alistapart.com/articles/ 
responsive-web-desien/) 。 他 在 Responsive 
Web Design 一 书 中 对 此 作 了 更 为 深入 细致 
的 探讨 ， 强 烈 推 荐 读者 去 读 一 读 。 

本 书 第 12 章 讲解 了 Ethan Marcotte 普 
及 的 这 种 技术 ， 以 及 Web 社区 其 他 贡献 者 
对 响应 式 Web 设计 的 改进 和 补充 。 


11.2 ”构建 页 面 


CSS 让 页 面 内 容 定 有 活力 ， 开 发 人 员 或 
者 设计 人 员 的 设计 技巧 大 部 分 都 要 靠 它 来 体 
现 。 可 以 将 CSS 应 用 于 第 3 章 讲 到 的 表现 页 
面 主体 结构 元 系 的 内 容 容器 ， 以 及 其 中 的 内 
容 ( 第 4 童 、 第 5 音 、 第 15 ~ 18 曹 ) 。 但 
首先 我 们 应 该 知道 ， 高 效 网 页 的 核心 是 结构 
良好 、 语 义 化 的 HTML， 参 见 图 11.2.1。 














构建 页 面 
(1) 恰当 地 使 用 article、aside、nav、 
section、header、footer 和 div 等 元 又 将 页 
面 划 分 成 不 同 的 逻辑 区 块 。 根 据 需 要 ， 对 它 
们 应 用 ARIA 地 标 角 色 。 上 述 两 点 的 详细 说 
明 见 第 3 章 。 图 11.2.1 创建 了 一 个 名 为 Le 
Journal 的 虚构 博客 ， 它 的 页 面 结构 如 下 所 示 。 
口 三 个 div, 其 中 一 个 将 整个 页 面包 起 来 ， 
男 外 两 个 将 两 部 分 主体 内 容 区 域 包 起 
来 以 便 应 用 样式 设计 。 
口 用 作 报 头 的 header， 包 括 标 识 、 社 交 
媒体 网 站 链接 和 主导 航 。 











口 划分 为 多 个 博客 条 目 section 元 素 的 
main 元 杂 ， 其 中 每 个 section 元 紊 都 
有 自己 的 页 脚 。 

口 附 注 栏 div (同时 使 用 了 了 article 和 
aside ) ， 提 供 关 于 博客 作者 和 右 栏 

(应 用 CSS 之 后 就 有 了 ) 博客 条 目的 











链接 。 
口 页 面 级 footer 元 素 ， 包 含 版 权 信 息 等 
网 符 。 


(2) 按照 一 定 的 顺序 放置 内 容 ， 确 保 页 
面 在 不 使 用 CSS 的 情况 下 也 是 合理 的 (参见 
图 11.2.2 ) 。 例 如 ， 首 先是 报头 ， 接 着 是 主体 
内 容 ， 接 着 是 一 个 或 多 个 附注 栏 ， 最 后 是 页 
面 级 的 页 脚 。 将 最 重要 的 内 容 放 在 最 上 面 ， 
对 于 智能 手机 和 平板 电脑 等 小 屏幕 用 户 来 说 ， 
不 用 滚动 太 远 就 能 获取 主体 内 容 。 此 外 ， 搜 
索引 擎 “看 到 ”的 页 面 也 类 似 于 未 应 用 CSS 
的 页 面 ， 因 此 ， 如 果 将 主体 内 容 提前 ， 搜 索 
引擎 就 能 更 好 地 对 网 站 进行 索引 。 这 同样 也 
会 让 屏幕 阅读 器 用 户 受 益 。 

(3) 以 一 致 的 方式 使 用 标题 元 素 (hl ~ 
h6 ) , 从 而 明确 地 标识 页 面 上 这 些 区 块 的 信息 ， 
并 对 它们 按 优先 级 排序 。 

(4) 使 用 合适 的 语义 标记 剩余 的 内 容 ， 如 
段落 、 图 和 列表 。 

(5) 如 条 有 必要 ， 使 用 注释 来 标识 页 面 上 
不 同 的 区 域 及 其 内 容 ， 如 图 11.2.1 所 示 。 从 
代码 中 可 以 看 出 ， 笔 者 喜欢 使 用 一 种 不 同 的 
注释 格式 标记 区 块 的 开始 ( 而 非 结 束 ) 。 


不 一 定 要 在 应 用 CSS 之 前 就 标记 
好 整个 页 面 。 实 践 中 ,很 少 先 将 一 个 区 块 
的 HTML 写 好 ， 再 为 其 编写 一 些 或 全 部 的 
CSS， 然 后 再 对 下 一 个 区 块 重复 这 一 过 程 ， 等 
等 。 处 理 方式 取决 于 个 人 习惯 。 
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<body> 
<div class="page"> 
<1-- ==== 开始 报头 ==== --> 
<header class="masthead" 
role="banner"> 
<p class="logo"><a href="/"><img ... 
/></a></p> 


<UL class="social-sites"> 
。|[ 社 交 图 片 链接 ] ... 
</U]> 


<nav role="navigation"> 
. [主导 航 链接 列表 |] ... 
</navy> 
</header> 
<!-- 结束 报头 --> 


<div clLass=' container > 
<!-- ==== 开始 主体 内 容 ==== --> 
<main role="main"> 
<section class="post"> 
<h1i>Sunny East Garden at the 
Getty Villax</h1> 


<img ... Class="post-photo-full” /> 


<div class="post-blurb"> 
<p>It is hard to believe ...</p> 
</div> 


<footer class="footer"> 
.… [博客 条 目 页 脚 ] .…. 
</footer> 
</section> 


<section class="post"> 
<h1>The City Named After Queen 
Victoria</h1> 


<img ... Class= post-photo /> 


<div class="post-blurb"> 
<p>An hour and a half aboard 
wa/ D> 
</div> 


<footer class="footer"> 
.… [博客 条 目 页 脚 ] .…. 
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</footer> 
</section> 
<nav role="navigation"> 
<ol class="pagination"> 
。 [链接 列表 项 ] ... 
</01> 
</nav> 
</main> 
《1-- 结束 主体 内 容 --> 


<1-- ==== 开始 附注 栏 
<div class="sidebar"> 
<article class="about"> 
<h2>About Mex</h2> 


</articley> 


<div class="mod"> 
<h2>My Travels</h2> 
..。 [映射 图 像 ] ... 


</div> 


<aside class="mod"> 
<h2>Popular Posts</h2> 
<ul class="links"> 
。 [链接 列表 项 ] ... 
</Ul> 
</aside> 


<aside class="mod"> 
<h2>Recently Shared</h2> 
<ul class="links"> 
。 [链接 列表 项 ] ... 
</Ul> 
</aside> 
</div> 
<1-- 结束 附注 栏 --> 
</div> 
<!-- 结束 容器 --> 


《<1-- ==== 开始 页 脚 ==== --> 
<footer TolLe="contentinfo” class= 
"footer "> 
<p class="legal"><small>&copy; 2013 Le 
Journal ...</small></p> 
</footer> 
<!-- 结束 页 脚 --> 
</div> 
<!-- 结束 页 面 --> 
</body> 
</html> 





11.2.1 这 是 贯穿 本 章 和 下 一 章 的 HTML 页 面 ， 这 个 页 面 中 有 四 个 主要 区 块 (masthead、main、 
sidebar 和 页 面 footer ) 。 主 体内 容 和 附注 栏 区 域 包含 在 class="container" 的 div 中。 整个 页 面包 含 在 
class="page" 的 div 中 。 完 整 的 页 面 内 容 请 参见 www.htmlcssvqs.com/8ed/11/finished-page， 默 认 情 况 下 页 
面 很 普通 ， 但 功能 完整 ， 参 见 网 11.2.2 
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Kk ls hard io believe but there are aboat BD Variciics of planms at the Bast Ganden ar the 人 Er 
malking the experiencs truly remarkable. This rea is One of The mrs traniquil spaces tM hs Villa, As 
| warmiered round, epioving shide provided by syoanmre nd laure] ees iid sereoided by 
pashing water from tw seulptural fountains, | couldn't help but think of ncient Roem and the 
mlbe of We purden 2 cenbhines ago, lt wis h phice of peace ud ... Bed Morm 


Posied in Califomia, Los Aneeles and Garden May 17, 2013 at 11:;20am 
The City Named After Queen Victoria 
11.2.2 ”这 是 示例 在 浏 览 硕 中 显示 的 样子 ， 除 了 
浏览 硕 默 认 样 式 以 外 并 没有 设置 其 他 样式 。 这 个 页 
面 是 一 栏 的 。 由 于 它 的 语义 结构 非常 好 ， 页 面 是 完 
全 可 用 且 可 理解 的 ， 只 是 有 一 点 朴素 





| 











关于 语义 的 注意 事项 

你 可 能 已 经 注意 到 ， 我 在 图 11.2.1 中 
使 和 J SectionFO 头 厅 标 人 @ 生 个 的 全 哮 分 
博文 的 条 目 (图 11.2.2 展示 了 一 个 ) 。 如 
RA 
article 标记 它们 ， 就 像 单 独 的 、 完 整 的 博 
客 文 章 页 面 那样 。 对 它们 使 用 article 替 
代 section 也 没有 错 ， 只 是 代表 这 一 段 代 
码 足 以 成 为 独立 的 内 容 。 第 3 章 包 含 了 各 
种 使 用 article 和 section 的 例子 。 





11.3 在 旧版 浏览 器 中 为 HTML5 
元 素 添 加 样式 


我 们 已 经 知道 ，HTML5 引入 了 一 些 新 的 
语义 化 元 素 ， 其 中 大 多 数 在 第 3 草 和 第 4 草 作 
了 讲解 。 在 大 多 数 情 况 下 ， 现 代 浏 览 絮 原生 文 
持 这 些 元 素 。 从 样式 的 角度 来 说 ， 这 意味 着 浏 
览 病 将 为 这 些 新 的 元 素 应 用 默认 样式 ， 就 像 它 
们 对 待 早 在 这 门 霹 言 诞 生 之 际 台 存在 的 元 素 那 
样 。 例 如 ,article、footer、header、nav 以 
及 其 他 一 些 元 系 显 示 为 单独 的 行 ， 就 像 div、 
blockquote、p 以 及 其 他 的 在 HTMLS5 之 前 的 
HTML 版 本 中 称 做 块 级 元 素 的 元 素 。 

你 可 能 会 想 : “对 于 旧版 浏 览 希 呢 ? 这 
些 浏 览 硕 出 现时 还 不 存在 HIMLS 的 新 元 素 ， 
我 该 如 何 使 用 这 些 元 素 呢 ? ” 

值得 庆 笠 的 是 大 多 数 浏 览 硕 允许 对 它 
们 并 不 原生 文 持 的 元 素 添 加 样式 。Internet 
Explorer 8 及 以 下 版 本 是 个 例外 ， 不 过 第 2) 
步 中 摘 述 了 一 个 徐 单 的 解决 办 法 。 因 此 ， 中 
春 下 面 三 个 简单 的 步 又 ， 就 可 以 开始 为 包含 
HTML5 元 素 的 页 面 添加 样式 了 。 



































针对 全 部 浏览 器 为 HTML5 新 元 素 添 加 样式 

(1) 将 图 11.3.1 中 的 代码 添加 到 网 站 的 主 
样式 表 文 件 ( 即 所 有 页 面 都 用 到 的 样式 表 文 
件 ) 。 注 意 : 如 果 使 用 CSS 重 置 或 normalize. 
css (参见 下 一 市 ) 可 以 跳 过 这 一 步 ， 它 们 会 
包含 这 里 的 代码 。 

(2) 有 两 种 方式 可 以 实现 在 Internet 
Explorer 9 之 前 的 下 中 为 新 的 HTMLS5 元 系 设 
置 样式 。〈 只 能 选择 一 种 ， 不 能 两 种 都 用 。 ) 
它们 都 使 用 了 HTMLS shiv 这 个 JavaScript 文 
件 (参见 补充 材料 “关于 HTMLS5 shiv” ) 。 

在 这 两 种 方法 中 ， 相 对 简单 的 一 种 是 在 
每 个 页 面 的 head 元素 ( 注意 不 是 header 元 
素 ) 中 添加 图 11.3.2 中 突出 显示 的 代码 。 这 
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段 代码 会 从 外 部 网 站 ( googlecode.com ) 加 载 
该 JavaScript 文件 。 

更 好 的 方式 是 将 该 JavaScript 文件 放 在 你 
目 己 的 网 站 上 。 这 是 推荐 的 做 法 。 这 样 可 以 
避免 在 googlecode.com 上 的 文件 出 问题 时 ( 尽 
管 可 能 性 不 大 ， 但 仍 有 可 能 ) ， 网 站 不 会 在 
旧版 本 的 正中 参 尘 。 可 以 通过 https:Wgithub. 
com/aFarkas/html5shiv/ 下 和 载 HTMLS shiv 的 
ZIP 文件 ( 如 图 11.3.3 所 示 ) ， 该 地 址 是 存放 
和 维护 HTMLS5 shiv 代码 的 地 方 ， 再 将 它 放 人 
你 的 网 站 (如 图 11.3.4 和 图 11.3.5 所 示 ) 。 


article, aside, figcaption, figure, footer, 
header, main, nav, section { 


display: block; 





11.3.1 大 多 数 浏 览 器 默认 将 它们 无 法 识别 的 元 
素 作 为 行内 元 素 处 理 。 因 此 这 一 小 段 CSS 将 强制 
HTML5 新 语义 元 系 显 示 在 单独 的 行 。 各 浏览 万 内 
置 的 默认 样式 表 均 对 div、blockquote、p 等 元 素 声 
明了 display: block; 。 更 多 详细 信息 参见 11.6 市 


《!DOCTYPE html> 

<html Jang= en > 

<head> 

<meta charset="utf-8" /> 

<title>Le Journal</title> 

<link rel="stylesheet" 
href="css/lejournal.css” /> 


<!--[if lt IE 9]> 
<script src="http://html5sshiyv. 
googlecode.com/svn/trunk/ 
html5.js"></script> 
<![endif]--> 
</head> 


<body> 








11.3.2 ”script 元 素 里 面 是 一 段 所 谓 的 条 件 注释 

(conditional comment ) 。 将 它 放 在 引用 样式 表 的 
link 元 素 后 面 。[Lif lt IE 9] 开头 的 这 段 代 但 表示 
只 有 Internet Explorer 9 以 下 版 本 的 正 才 加 载 这 个 
JavaScript 文件 。 通 浓 ， 最 好 在 页 面 结束 的 位 置 加 
载 JavaScript ( 原因 见 第 19 章 ) 。 不 过 ，HTML5 
shiv 是 少 有 的 必须 在 head 中 加 载 JavaScript 的 情况 
之 一 。 否 则 ， 它 就 不 起 作用 。 








(3) 现在 ， 可 以 随意 使 用 CSS 评 加 样式 了 ! 


11.3.3 将 HITMLS shiv 的 ZIP 文件 保存 到 你 的 电 
脑 ， 然 后 解压 缩 ， 得 到 将 会 使 用 的 JavaScript 文件 


7 | html5shiv-master 
bower,j5son 
> 改 build 
| build.xml 
v | dist 


© html5shiv-printshiv.js 
避 htmlsshiv.jjs 
] readme.md 
» 襄 ] src 
= 上 test 
11.3.4 在 电脑 上 打开 该 ZIP 文件 时 ， 会 发 现 其 
中 包含 了 几 个 文件 夹 ( 如 图 所 示 ) 。 你 只 需要 关注 
dist 这 个 文件 来， 其 中 包含 了 将 要 用 到 的 html5shiv. 
js。 将 该 文件 复制 到 你 的 网 站 的 某 个 子 目 录 ( 如 名 
为 js 的 目录 ) 里 面 。 此 外 ， 还 可 以 使 用 html5shiv- 
printshiv.js。 它 与 html$shiv.js 基本 相同 ， 只 是 它 还 
可 以 让 IE8 及 更 早 版 本 的 正在 打印 时 能 够 正确 地 
处 理 新 的 HTMLS5 元 素 








<link Tel= stylesheet 
href="css/lejournal.css” /> 
<!--[if lt IE 9]> 
<script Src= js/htm15shiv.Jjs > 


</script> 
<![endif]--> 
</head> 
<body> 








11.3.5 ”突出 显示 的 代码 显示 在 网 页 的 head 中， 
引用 样式 表 的 link 元 素 之 后 。 这 里 与 图 11.3.2 的 
唯一 区 别 是 src 的 值 。 该 值 应 该 引用 你 复制 到 网 站 
里 的 JavaScript 文件 的 位 置 。 这 段 代 人 码 假 定 你 将 该 
文件 放置 在 HTML 页 面 所 在 文件 夹 下 的 js 文件 夹 
里 (关于 URL， 参 见 1.7 节 ) 。 可 以 根据 需要 修改 
src 里 的 路 径 ， 从 而 与 个 人 网 站 的 实际 情况 相符 
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天 于 HTML5 shiv 

与 其 他 主流 浏览 器 不 同 ，Internet 
Explorer 8 及 之 前 的 版 本 会 忽略 它们 不 原生 
支持 的 元 素 的 CSS。HTMLS shiv 是 专门 
用 于 解决 这 一 问题 的 一 段 JavaScript。 (有 
时 也 称 作 HIMLS shim。 ) Sjoerd Visscher 
发 起 了 一 个 研究 了 正 特 性 的 Web 社 区 ， 
HTMLS shiv 就 是 该 社区 的 几 个 成 员 创建 的 。 

HTML5 闲 刀 也 集成 进 了 其 他 一 些 


JavaScript 库 , 如 Modernizr ( www.modernizr 


com/) 。 因 此 ， 如 果 你 在 页 面 中 使 用 了 
Modernizr， 就 不 需要 单独 加 载 HIMLS 阐 


刀 了 。 顺 便 说 一 下 ， 可 以 跳 过 前 面 步骤 中 
的 第 (2) 步 。Modernizr 是 一 个 非常 方便 的 
库 ， 它 可 以 检测 浏览 器 是 否 支持 HITML5 
和 CSS3 的 各 种 特性 


11.4 ”对 默认 样式 进行 重 置 或 标准 化 
前 面 提 到 ， 每 个 测 览 问 剖 有 了 认 置 的 扶 认 
样式 表 。HTML 会 遵照 该 样式 表 显 示 ， 除 非 
你 自己 编写 的 CSS 覆盖 了 它们 。 整 体 上 ， 不 
同 浏览 硕 提 供 的 默认 样式 表 是 相似 的 ， 但 也 
存在 一 定 的 差异 。 为 此 ， 开 发 人 员 在 应 用 他 
们 目 己 的 CSS 之前, 常 弟 需要 抹 平 这 些 差 异 。 
抹 平 差异 的 方法 主要 有 两 种 ( 只 使 用 其 
中 一 种 即 可 ) 。 
口 使 用 CSS 重 置 (reset ) 开始 主 样式 表 ， 
如 Eric Meyer 创 建 的 Meyer 重 置 (http:/ 
meyerweb.com/eric/tools/css/reset/ ) 。 
另外 还 有 其 他 的 一 些 重 置 样式 表 。 
口 使 用 Nicolas Gallagher 和 Jonathan Neal 
创建 的 normalize.css 开始 主 样式 表 。 
该 样式 表 位 于 http://necolas.github.com/ 
normalize.css/( 最 新 版 本 使 用 Download 
按钮 ) 。 
从 上 面 合适 的 URL 中 复制 CSS， 并 粘贴 
图 灵 社 区 会 员 

















到 你 上 自己 的 样式 表 中 。 

CSS 重 置 可 以 有 效 地 将 所 有 默认 样式 都 
设 为 “ 零 ”， 如 图 11.4.1 所 示 。 第 二 种 方法 ， 
即 normalize.css， 则 采取 了 不 同 的 方式 。 它 并 
非 对 所 有 样式 进行 重 置 ， 而 是 对 默认 样式 进 
行 微 调 ， 这 样 它 们 在 不 同 的 浏览 规 中 具有 相 
似 的 外 观 ， 参 见 图 11.4.2。 ( 重要 提醒 : 我 删 
除了 前 面 两 个 图 中 的 大 尺寸 图 像 ， 以 便 你 能 
看 到 更 多 文本 ， 重 置 或 者 normalize.css 都 不 
会 隐藏 图 像 。 ) 

并 非 一 定 要 用 到 这 两 种 方法 中 的 一 种 。 
保留 浏览 硕 的 默认 样式 ， 并 有 目 己 编写 相应 的 
CSS 也 不 错 。 

如 果 确 实 要 使 用 normalize.css 或 CSS 重 
置 ， 也 不 一 定 要 保留 它们 提供 的 所 有 CSS 。 
它们 的 样式 规则 中 ， 有 一 些 所 针对 的 HTML 
元 素 是 你 的 网 站 并 未 使 用 的 。 这 时 ， 束 不 必 
在 你 的 样式 表 中 包含 这 些 多 余 的 CSS 。 
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图 11.4.1 ”这 是 应 用 了 重 轩 的 示例 页 面 。 最 大 的 变 
化 是 所 有 的 字体 大 小 都 变 成 一 样 的 了 ， 文 本 边框 和 
列表 样式 没 了 ， 所 有 的 外 边 距 和 内 边 距 都 设 为 了 0 


在 本 章 中 ， 我 使 用 了 normalize.css 中 
的 一 部 分 代码 (如 图 11.4.3 所 示 ) ， 并 对 文 
本 添加 了 一 些 样 式 ， 形 成 一 个 初始 的 页面 。 
在 根据 本 草 的 介绍 继续 添加 样式 之 前 ， 页 
面 的 样子 如 图 11.4.4 所 示 。 可 以 通过 www. 
htmlcssvgs.com/8ed/11 找到 图 11.4.1、 图 11.4.2 
和 图 11.4.4 对 应 的 完整 页 面 。 
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11.4.2 ”这 是 使 用 了 normalize.css ( 而 不 是 重 置 ) 
的 示例 页 面 。 它 与 无 样式 的 默认 显示 效果 很 相似 ， 
但 也 有 差异 。 更 重要 的 是 ， 这 个 版 本 与 使 用 当今 党 
见 的 浏览 硕 查 看 的 效果 是 极为 相似 的 











/*! normalize.css v2.1.2 | MIT License | 
> git.io/normalize */ 


article, aside, figcaption, figure, footer, 
— header, main, nav, section { 
display: block; 


html { 
-ms-text-size-adjust: 100%; 
-webkit-text-size-adjust: 100%; 


} 


body { 
margin: 0; 


} 


a:focus { 
outline: thin dotted; 


} 


a:active, 
a:hover { 
outline: 0; 


} 


small { 
font-size: 80%; 


} 


img { 


border: 0; 


} 


11.4.3 ”这 是 将 normalize.css 中 本 站 不 需要 的 样 
式 规 则 移 除 后 的 一 个 版 本 
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11.4.4 ”这 是 经 过 重 置 并 定义 好 了 文本 格式 后 的 
示例 页 面 的 样子 。 在 本 草 中 ， 你 将 以 此 为 起 点 对 页 
面 其 余 的 样式 进行 定义 





11.5 盒 模 型 


CSS 处 理 网 页 时 ， 它 认为 每 个 元 素 都 包 
含 在 一 个 不 可 见 的 盒子 里 。 这 就 是 众所周知 
的 盒 模型 ， 这 里 的 盒子 由 内 容 区 域 、 内 容 区 
域 周 于 的 空间 ( 内 边 忠 ，padding ) 、 内 边 距 
的 外 边缘 (边框 ，border ) 和 边框 外 面 将 元 
素 与 相 邻 元 素 隔 开 的 不 可 见 区 域 ( 外 边 距 ， 
margin ) 构成 ， 参 见 图 11.5.1。 这 类 似 于 挂 在 
墙 上 的 带 框 架 的 画 ， 其 中 图 画 是 内 容 ， 衬 边 
是 内 边 距 ， 框 架 是 边框 ， 而 该 画 框 与 相 邻 画 
框 之 间 的 距离 则 是 外 边 路。 
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二 外 达旦 
上 边框 


下 边框 
下 外 这 潮 





11.5.1 每 个 元 素 的 盒子 都 有 一 些 决定 该 元 素 所 
占 空间 及 其 外 观 的 要 素 。 可 以 使 用 CSS 分 别 控制 
各 个 要 厅 。 注 意 ， 在 默认 情况 下 ， 宫 度 和 高 度 仪 定 
义 内 容 区 域 的 尺寸 。 背 景 ( 蓝 色 区 域 ) 会 延伸 到 边 
框 的 后 面 ， 因 此 ， 通 常情 况 下 ， 它 仅 在 内 边 距 所 延 
伸 到 的 区 域 可 见 ， 除 非 边 框 是 透明 的 或 半 透 明 的 








内 容 区 域 与 边框 之 间 的 空间 是 内 边 
距 (这 个 图 中 四 个 边 都 有 内 边 距 ) ， 
背景 颜色 会 填充 内 容 区 域 和 内 边 距 


外 边 距 是 将 某 个 元 素 与 其 他 元 素 分 开 
的 空间 (有 时 候 内 边 距 也 起 这 个 作用 ) 


s Fleina 


i 
外 观 和 位 置 ， 并 由 此 控制 网 页 的 布局 ， 
图 11.$.2。 本 章 会 深入 讲解 width、 ha 
border 、margin 和 控制 盒子 外 观 的 其 他 属性 。 
但 首先 ， 理 解 盒 模型 的 基础 知识 非常 重要 。 


宽度 、 高 度 和 盒 模型 

关于 CSS 的 width 属性 对 元 素 所 显示 宽 
度 的 影响 ， 有 两 种 处 理 方式 。 (不 包含 任何 
将 其 与 邻近 元 系 隔 开 的 外 边 距 。 ) 

默认 的 处 理 方 式 ( 如 图 11.5.1 所 示 ) 实 
味 上 有 些 有 悖 于 常理 。 浏 览 姨 中 元 素 的 宽度 
与 其 width 属性 值 并 不 一 致 ( 除非 它 没有 内 边 
距 和 边框 )。CSS 中 的 宽度 指示 的 是 内 边 距 
里 内 容 区 域 的 宽度 ， 如 图 11.5.1 表示 的 那样 。 
而 元 素 在 浏览 姻 中 的 显示 宽度 则 是 内 容 宽度 、 
左右 内 边 距 和 左右 边框 的 总 和 。 显 示 高 度 与 之 
类 似 ， 只 不 过 计算 的 是 上 下 内 边 距 和 边框 值 。 











ye 
300 像素 宽 ， 没有 显 式 指定 高 度 ， 因 
而 会 基于 内 容 流 自 动 设置 


oring the 
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图 11.5.2 示例 页 面 中 附注 栏 的 盒 模 型 , 记 住 ,每 个 元 素 都 有 自己 的 盒子 ,例如 ,3 
x 间 则 是 包含 该 图 像 的 article 元 素 的 内 边 趾 





而 它 左右 的 空 
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这 里 显示 的 img 元 素 有 边框 ， 


员 wenshanjun 专 享 尊重 版 权 


对 大 多 数 代码 编写 人 员 来 说 ,为 一 种 方 
式 则 更 为 直观 。 使 用 这 种 方式 的 话 ， 元 素 的 
显示 宽度 就 等 于 width 属性 的 值 。 内 容 宽度 、 
内 边 距 和 边框 都 包含 在 里 面 ( 如 图 11.5.3 所 
示 )。height 属性 与 之 类 似 。 要 使 用 这 种 模式 ， 
仅 需 对 元 素 设置 box-sizing: border-box;。 














二 外 和 边 距 
上 边框 


下 边框 
下 处 这 中 





11.5.3 ”如 果 设 置 了 box-sizing: border-box;， 
则 宽度 和 高 度 就 包含 了 除外 边 距 以 外 的 所 有 要 又 。 
如 果 不 设置 这 条 规则 ， 则 表现 为 图 11.5.1 所 示 的 方式 

以 上 讲述 都 比较 抽象 ， 因 此 不 妨 看 看 分 
别 使 用 两 种 方式 的 一 个 实例 ( 如 图 11.5.4 所 
示 ) 。 注 意 这 里 显示 的 padding 和 border- 
width 值 在 每 个 边 都 起 作用 。 例 如 ，padding: 
15px; 会 在 水 平方 向 总 共产 生 30 像素 的 内 边 
距 ( 左 15 像 素 , 右 15 像素) ， 垂 直方 向 也 
是 30 避 《上 15 元 来 ， 下 全 人 避 认 )。 


图 11.5.1 是 根据 Rich Hauck 的 盒 模型 
图 绘制 的 ( 该 图 本 身 是 根据 CSS 规范 中 的 播 
图 绘制 的 ) 。 








/> 
币 


关于 box-sizing: border-box;、 通 


不 设置 height 值 的 原因 等 主题 , 参见 11.7 节 。 
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Default box model 


border-width: lO0px; 
padding: lSpx; 
width: 300px; 

Content width is 300 pixels 


Display width is 350 pixels 


border-width: lOpx; 
padding: lSpx; 
width: 300px; 


Display width is 300 pixels 





11.5.4 两 个 div 的 border-width ( 浅 绿 色 ) 、 
padding 和 width 值 都 相同 。 上 图 是 以 默认 盒 模 型 
(如 图 11.5.1 所 示 ) 显示 的 ， 下 图 则 是 以 设置 了 
box-sizing: border-box; 的 盒 模型 (如 图 11.5.3 所 
示 ) 显示 的 ， 其 显示 宽度 与 width 属性 值 相 同 〈 都 
是 300 像 又 )。 两 个 盒子 都 设置 了 height: 170px;( 这 
里 没有 显示 出 来 ) ， 不 过 第 一 个 要 更 高 一 些 ， 这 是 
由 于 上 下 内 边 距 和 边框 尺寸 增加 了 显示 高 度 ( 注意 ， 
黑色 的 横 条 不 是 这 些 div 的 一 部 分 ， 因 此 它们 不 会 
影响 div 的 高 度 ) 





11.6 ”控制 元 素 的 显示 类 型 和 可 
见 性 


正如 第 1 草 讲 到 的 ， 每 个 元 素 在 默认 情 
况 下 要 么 显示 在 单独 的 行 ( 如 hl ~ h6、p 等 )， 
要 么 显示 在 行内 (如 em、strong、cite 等 ) ， 
如 图 11.6.1 所 示 。 第 1 章 还 提 到 ， 前 一 种 元 
系 称 为 块 级 元 素 ， 后 一 种 称 为 行内 元 素 〈 这 
是 一 种 非 官方 的 叫 法 ) 。 

造成 这 种 情况 的 本 质 是 它们 的 display 属 
性 ， 即 块 级 元 素 被 设置 为 display: block (对 
于 1 元 素 为 display: list-item) ， 而 行内 
元 素 被 设置 为 display: inline。 

当然 ， 使 用 CSS 可 以 改变 元 素 的 默认 
显示 类 型 ， 例如 将 block 改 为 inline ( 如 
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图 11.6.2 所 示 ) ， 或 者 反 过 来 4 如 网 11.6.3 
所 示 ) 。 还 有 一 种 混合 显示 方式 称 为 inline- 
block， 证 元 系 与 其 他 内 容 出 现在 同一 行 ， 同 
时 具有 块 级 元 素 的 属性 (如 图 11.6.4 ~ 图 11.6.6 
所 示 ) 。 还 可 以 通过 设置 jisplay 属性 让 元 素 











完全 不 在 页 面 上 显示 ( 如 图 11.6.7 所 示 ) 。 


<p>This is the «em>first</em> paragraph.</p> 
<p>This is the “em>second</em> paragraph.</p> 


Browser default 


This is the first paragraph., 
This is the second paragraph, 








11.6.1 这 些 人 简单 角 套 em 元 素 的 段落 演示 了 
display: block 和 display: inline 的 区 别 


p { 


display: inline; 


Paragraphs set to aisplay: inline 
This is the first paragraph. This is the second paragraph. 


图 11.6.2 ”两 个 段落 看 起 来 像 一 个 段落 








em { 
display: block; 


em elements set to display: block 


This is the 
first 
paragraph. 


This is the 
second 


paragraph. 











图 11.6.3 em 元 素 显 示 在 单独 的 行 ， 就 像 段 落 
一 样 


em { 
background: lightgreen; 


display: inline-block; 
width: 300px; 





elements set to display: inline-block 
This is the #5 paragraph. 
This is the SECOMOU paragraph. 


图 11.6.4 设置 为 inline 的 元 素 会 忽略 任何 
width、height、margin-top 和 margin-bottom 设 
置 。 不 过 ， 设 置 为 inline-block 的 元 素 可 以 使 用 
这 些 属性 ， 如 这 里 的 en 可 以 设置 width。 因 此 ， 
如 果 本 例 对 em 设置 display: inline;， 则 会 像 
图 11.6.1 那样 显示 ( 除了 背景 色 ) ， 无论 是 否 
对 它 指定 width ( 所 有 的 display 类 型 都 接受 
background 样式 。 这 里 将 em 的 背景 设 为 浅 绿色 ， 
是 为 了 让 em 的 客 度 变 得 明显 ) 








.Social-sites 1i { 
display: inline; 


.nav-main li { 
display: inline-block; 


.nav-main a { 
color: #292929; 
display: inline-block; 
font-family: “Open Sans', sans-serif; 
font-size: 1.125em; 
font-weight: 700; 
text-transform: uppercase; 








11.6.5 这 里 将 主导 航 链接 及 其 父 元 素 列 表 项 
目 设置 为 inline-block， 从 而 方便 为 其 添加 上 下 
内 边 距 (参见 11.8 节 ) 。 社 交 网 站 图 标 ( 指 这 里 
的 .social-sites 1i 选择 的 元 双 ) 不 需要 添加 块 级 
元 素 才 具有 的 样式 ， 因 此 将 它们 设置 为 inline 就 
够 了 
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HOME ABOUT CONTACT 


图 11.6.6 这 里 是 一 个 演示 display 属性 功能 的 实 
例 。 社交 网 站 图 标 与 主导 航 都 包含 在 列表 项 目 (1i ) 
里 ， 因 此 ， 在 默认 情况 下 ， 它 们 从 上 往 下 排列 (如 
左 图 所 示 ) 。 将 它们 默认 的 display: list-itenm; 
履 盖 后 〈 如 图 11.6.5 所 示 ) ， 每 个 链接 列表 中 的 元 
素 都 显示 在 一 行内 








em { 
display: none; 


elements set to display: none 


This is the paragraph. 


This is the paragraph， 


11.6.7 em 文字 既 不 显示 ， 也 不 占据 任何 视觉 
空间 。 在 HTML 中 紧 跟 在 它 后 面 的 文字 会 问 左 移 
动 ， 完 全 无 法 察觉 到 em 文字 曾 占据 那个 位 置 


文档 流 

默认 情况 下 ， 元素 会 按 腿 它们 在 
HTML 中 自 上 而 下 出 现 的 次 序 显 示 (这 称 
为 文档 流 ，document flow ) ， 并 在 每 个 非 
4 
1 
面 这 些 例子 更 长 的 例子 。 


1. 指定 元 素 的 显示 方式 

(1) 在 样式 表 规则 中 ， 输 入 display:。 

(2) 输入 block， 让 元 素 显 示 为 块 级 元 素 
(就 像 开始 新 的 段落 ) ， 参 见 图 11.6.3 

或 者 输入 inline， 让 元 素 显 示 为 行内 元 
素 〈 不 同 于 开始 新 的 段落 ) ， 人 参见 网 11.6.2; 
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或 者 输入 inline-block， 证 元 系 显 示 为 
行内 元 素 ， 同 时 具有 块 级 元 素 的 特征 ， 即 可 以 
为 元 素 的 四 条 边 设置 width、height 、margin、 
padding 等 属性 ， 参 见 图 11.6.4 ~ 图 11.6.6; 

或 者 输入 none， 隐 藏 元 票 ， 并 将 其 从 文 
档 流 中 完全 移 除 ( 参见 图 11.6.7 ) 。 

关于 display 属性 的 其 他 值 ， 参 见 提示 。 





2. 控制 元 素 可 见 性 

visibility 属性 的 主要 目的 是 控制 元 素 
是 否 可 见 。 与 display 属性 不 同 的 是 ， 使 用 
visibility 隐藏 元 素 时 ， 元 素 及 其 内 容 应 该 
出 现 的 位 置 会 留 下 一 片 空 白 区 域 ( 如 图 11.6.8 
所 示 ) 。 隐 藏 元 素 的 空白 区 域 仍然 会 在 文档 
流 中 占据 位 置 。 

(1) 在 样式 表 规 则 中 ,输入 visibility:。 

(2) 输入 hidden， 计 元 素 不 可 见 ， 但 在 文 
档 流 中 保留 它 ( 如 图 11.6.8 所 示 ) ; 

或 者 输入 visible， 让 元 素 显示 出 来 。 























em { 


visibility: hidden; 
} 





em elements set to visibility: hidden 
This is the 
This is the 


paragraph. 


paragraph, 





11.6.8 ”隐藏 的 em 文字 所 在 的 位 置 出 现 了 一 块 
空 日 ， 就 像 是 将 em 文字 设 成 了 日 色 。 空 日 的 尺寸 
与 文本 (或 者 其 他 任何 隐藏 的 内 容 ) 的 大 小 完全 
一 臻 





设置 为 display: inline; 的 元 素 不 
接 爱 padding 的 设置 ， 但 padding-top 和 
padding-bottom 会 越界 进入 相 邻 元 素 的 区 域 ， 
而 不 是 局 限于 该 元 素 本 身 的 空间 。 可 以 对 元 
素 设置 background: red; 以 作 测试 。 
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第 12 章 演示 了 一 个 针对 窜 屏 (如 
手机 屏幕 ) 将 行内 元 素 设置 为 display: 
block; ， 针 对 宽屏 〈 如 课 面 计算 机 的 屏幕 ) 改 
回 display: inline; 的 实例 。 


设置 为 display: none; 或 visibility: 
hidden; 的 元 素 里 的 所 有 内 容 ( 包括 所 有 的 
后 代 ) 也 会 受到 影响 。 人 例如， 如果 将 一 个 包 
含 一 些 p、figure 和 img 元 素 的 article 元 
素 设 置 为 display: none;， 则 这 些 元 素 都 
不 会 显示 出 来 。 如 果 将 article 元素 设 置 为 
visibility: hidden; ， 就 会 出 现 一 片 空白 (很 
有 可 能 是 一 大 块 空白 ) 。 


display 属性 还 有 其 他 几 个 值 ， 但 浏 
览 器 对 它们 的 支持 程度 是 有 差异 的 。 例 如 ， 
grid 和 flex 属 性 提供 了 一 些 额 外 的 布局 技术 ， 
但 它们 还 没有 进入 最 终 的 规范 。 更 多 信息 参 
见 http:/developer.mozilla.org/CSS/display。 


除了 inherit，visibility 属性 还 有 
一 个 值 : collapse， 用 于 table 元 素 的 部 分 内 
容 。 关 于 collapse 的 更 多 人 信息， 参见 http:// 
developer.mozilla.org/CSS/visibility 。 


11.7 设置 元 素 的 高 度 和 宽度 


可 以 为 很 多 元 素 设 置 高 度 和 宽度 ， 如 分 
块 内 容 、 段 落 、 列 表 项 、div、 图 像 、video、 
表单 元 素 等 (参见 图 11.7.1 ~ 图 11.7.3 ) 。 

同时 ， 可 以 为 短语 内 容 元 素 (默认 以 
行内 方式 显示 ) 设置 display: block; 或 
display: inline-block; ， 再 对 它们 设置 宽度 
或 高 度 。( 关于 display 属性 的 更 多 信息 ， 参 
见 11.6 节 。) 

















main { 
width: 600px; /* 62.5% = 600px/960px */ 


上 


.Sidebar { 
width: 300px; /* 31.25% = 300px/960px */ 





} 


11.7.1 最终， 页面 会 有 两 栏 ， 一 栏 是 main 里 
的 内 容 ， 一 栏 是 class="sidebar" 的 div 里 的 内 
容 。 这 些 规 则 分 别 对 它们 设置 了 固定 的 宽度 (如 
图 11.7.2 和 图 11.7.3 所 示 ) 


i ra Pad 


ounnyEast Garden at the 
Getty Villa 


肝 wm hand to hdres, brat hoes arvt 让 RNO Fe varielies of Flirt ud Ue Fiat Wanden MM 
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11.7.2 这 里 将 main 的 宽度 设置 为 600px 以 适 
应 图 像 的 宽度 。 现 在 ， 无 论 训 览 融 窗 口 的 宽度 是 多 
少 ， 页 面 主 区 域 的 宽度 会 始终 保持 600px 不 变 。 文 
字 会 自动 折 行 ， 不 会 超过 图 像 的 宽度 








《4 Journaa 
PA PHFOUF LU CARMENIUIE HE Wi 


Read More > 


Swe eked Cam eg co May Or 0 See 





11.7.3” 侧 边栏 以 About Me 模块 开头 。 目 前 ， 
我 们 的 页 面具 有 一 列 ， 可 以 看 到 main 内 容 的 尾部 
位 于 侧 边栏 的 上 方 。 还 可 以 看 到 , 侧 边 栏 的 宽度 (日 
前 设置 为 300px ) 只 有 main 的 冤 度 的 一 半 
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1. 设置 元 素 高 度 或 宽度 的 步骤 

(1) 输入 width: w， 其 中 的 w 是 元 素 内 
容 区 域 的 宽度 ， 可 以 表示 为 长 度 ( 带 单 位 ， 
如 px、em 等 ) 或 父 元 素 的 百分数 。 或 者 使 用 
auto 让 浏览 硕 计 算 宽 度 〈 这 是 默认 值 ) 。 

(2) 输入 Re hp， 其 中 的 hb 是 元 系 内 








容 区 域 的 高 度 ，; 示 为 长 度 ( 带 单位 ， 
如 px、em 等 )。 二 auto 让 浏览 器 计 
算 高 度 ( 这 是 默认 值 ) 。 


对 定 宽 页 面 使 用 像素 ， 对 响应 式 Web 设计 


本 章 在 介绍 网 页 布局 方法 时 ， 对 宽度 
使 用 像素 为 单位 。 在 代码 注释 里 ， 说 明了 
价 的 百分数 ， 以 及 如 何 算 出 

0 站 
0 则 会 使 用 百分数 ， 而 不 是 
人 
内 边 距 、 边 框 和 外 边 距 都 不 包含 在 宽 


或 高 度 的 数值 里 (参见 11.5 节 及 本 节 后 面 
的 “宽度 、 auto” be a 11.5 第 
绍 
box; (如 图 11.7.4 i , 
内 边 距 和 边框 的 方法 。 


让 宽 a 度 包 含 


| 


-webkit-box-sizing: border-box; 


-moz-box-sizing: border-box; 
box-sizing: border-box; 





11.7.4 可 以 使 用 * 通配符 对 所 有 元 素 应 用 
border-box 的 规则 。 当 然 ， 也 可 以 单独 对 元 素 应 用 
该 规则 〈 用 你 需要 的 选择 融 蔡 换 * 即 可 ) 。 带 有 
-webkit- 和 -moz- 这 些 奇怪 前 级 的 属性 可 以 让 这 些 
规则 在 旧 的 Android 和 iOS 设备 上 起 作用 ， 同 时 在 
Firefox 上 也 能 正常 工作 。 
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百分数 是 相对 于 父 元 素 的 宽度 的 ， 而 
是 和 志和 的 怕 家 的 .人 和， 
假设 div 宽度 为 100 像素 ， 将 其 内 部 的 某 个 

ee 个 于 元 责 的 

为 70 像素 ， 你 在 下 一 章 还 能 看 到 这 方面 的 
例子 。 


不 能 为 显示 为 行内 元 素 的 元 素 (如 短 
语 内 容 ) 设置 疝 度 或 蜗 度 ， 除 非 为 它们 设置 
display: inline-block 或 display: block。 
关于 display 属性 的 更 多 信息 ,参见 11.6 节 。 


EB 还 有 min-width、min-height、max-width 
和 max-height 属性 用 来 设置 最 小 和 最 大 尺 
寸 。max-width 属性 是 为 流 式 布局 ( 下 一 章 会 
讲 到 一 个 流 式 布局 的 例子 ) ee 的 
绝 佳 工 具 。 在 那个 例子 中 ， 对 包围 整个 页 面 
的 .page div 设置 了 Ws 960pXx;。 同 
时 ，main 和 .sidebar 均 使 用 百分数 宽度 ， 因 
此 页 面 在 小 一 些 的 屏幕 上 会 较 宕 ， 在 大 一 些 
的 屏幕 上 则 较 宽 ， 但 不 会 超过 960 像素 ， 哪 
怕 屏 幕 非常 大 。 另 外 ， 参 考 补充 材料 “为 什 
么 min-height 通 第 比 height 更 适用 ”， 
width 和 height 不 是 继承 的 。 

2. 宽度 、 外 边 距 和 auto 

如 果 不 显 式 设置 帘 度 和 高 度 ， 浏览 妖 就 
会 使 用 auto。 对 于 大 多 数 默认 显示 为 块 级 元 
素 的 元 系 ，width 的 auto 值 是 由 包含 块 的 宽 
度 减 去 元 系 的 内 边 距 、 边 框 和 外 边 距 计算 出 
来 的 ， 参见 图 11.7.5 和 图 11.7.6。 简 单 说 来 ， 
包含 块 的 宽度 指 的 是 父 元 素 给 元 素 留 出 的 
壳 度 。 
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人 
background: khaki; /* tan */ 
width: 300px; 


background: white; 

border: 3px solid royalblue; 
margin: 10px; 

padding: 8px; 


.Second { /# 第 二 个 段落 */ 
border-color: orangered; 
width: 200px; 


11.7.5 在 这 个 例子 中 ， 将 父 元 素 div 的 width 
设 为 300 像素 。 这 将 是 我 们 的 包含 块 。 然 后 ， 两 
个 段落 各 个 边 上 都 有 10 像素 的 外 边 距 、8 像素 的 
内 边 距 及 3 像素 贤 的 边框 。 第 一 个 段落 的 览 度 是 
自动 设置 的 ， 因 为 auto 是 width 的 默认 值 (除非 
旨 定 其 他 的 值 ) 。 第 二 个 段落 〈 在 HIML 中 带 有 
class="second" ) 设 为 200px 


例如 ， 位 于 200 像素 宽 的 空间 里 的 p 元 
系 的 auto 宽度 为 200 像 系 。 但 如 果 为 其 设置 
padding-right: 10px, 则 auto 宽度 为 190 像 素 。 

对 于 图 像 这 样 的 元 素 ，auto 锅 度 等 于 
它们 固有 的 宽度 ， 即 外 部 文件 的 实际 尺寸 

(如 本 章 示 例 页 面 中 最 大 的 图 像 ， 大 小 为 
600 x365 ) 。 行 内 元 素 会 完全 忽略 width 属 
性 ( 即 不 能 为 em、cite 等 元 系 设 置 宽 度 ， 除 
非 将 它们 设置 为 display: inline-block 或 
display: block ) 。 关 于 display, 参见 11.6 市 。 

如 果 手 动 设 置 width、margin-left 和 
margin-right 值 ， 但 这 些 什 加 上 边框 和 内 边 
距 的 值 不 等 于 包含 块 的 大 小 ， 有 的 属性 就 
需要 作出 让 步 。 实 际 上 ， 浏 览 需 会 优先 考虑 
width, 确保 右边 的 间距 大 于 你 设置 的 margin- 
right (参见 图 11.7.6 中 底部 的 段落 ) 。 

如 果 手 动 设置 width， 但 将 某 个 外 边 距 设 
为 auto， 那 么 这 个 外 边 距 将 进行 伸缩 以 弥补 
不 足 的 部 分 。 























10 像素 的 


10 像 素 的 外 边 距 自动 宽度 为 258 像 素 外 边 距 





‘生僻 Width, margins, and auyto | 
| Width, margins, alrd aute 
This paragraph has an automatic 
width, 10px mardins, 3px blue 
borders, and Spx| padding. Since 
the containing blick is 300px 
wide, this paragraph has a width 
of 300-10-10-3-3-8-8 {that is, 
300-42), Or 258 pixels, as 
determined by the browser 
automatically. Don't forget you 
have to subtract the margin, 
border, and padding from both 
the left and right sides! 


This paragraph has 
class="second" applied 
to it, so its width is set to 
200 pixels, with the same 
10px margins, 3px 
borders (though red), and 
Bpx padding as the first 
paragraph. So, the total 
amount of horizontal 
space 让 occupies is 
200+10+10+3+3 十 5++5 
(that is, 200+42), Or 242 
pixels. Because it has an 
explicit width set, the 
paragraph isn't stretched 
by the browser 
automatically to fill the 
remaining space of the 
containing block. 

I<———— width: 200pxXx——>||1<— > 





width: 300px 

(包含 块 ) 
11.7.6 如果 width 是 auto ( 就 像 第 一 个 段落 那 
样 ) ， 它 的 值 就 是 由 包含 块 ( 黄 福 色 区 域 ) 的 冤 度 
减 去 元 素 自 身 的 外 边 距 、 内 边 距 和 边框 计算 出 来 
的 。 如 果 width 是 手动 设置 的 〈 就 像 最 后 一 个 段落 
那样 ) ， 则 右 外 边 距 第 稼 会 进行 调整 以 填补 不 足 的 


空间 
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不 过 ， 如 果 手 动 设置 width， 并 将 左右 外 
边 距 都 设 为 auto， 那么 两 个 外 边 距 就 将 设 为 
相 秆 的 最 大 值 ， 这 样 会 导致 元 又 居 中 。 例 如， 
.page { margin: 0 auto; } 会 使 对 应 的 元 素 
在 页 面 居 中 显示 。 这 也 是 我 对 示例 页 面 所 做 
的 设置 ， 参 见 图 11.7.6 和 图 11.10.7。 











为 什么 min-height 通常 比 height 更 适用 

除非 你 确定 元 素 的 内 容 不 会 变 得 更 高 ， 
最 好 避免 在 样式 表 中 指定 高 度 。 在 大 多 数 
情 于 可 以 让 内 容 和 浏览 器 自动 控制 高 
度 。 这 可 以 让 内 容 在 浏览 器 和 设备 中 根据 
需要 进行 流动 。 

如 果 设 置 了 高 度 请 随 着 人 
A 
期 之 外 的 。 在 这 种 情 0 符合 标准 的 浏 


pe 


2 


人 它们 在 你 指定 高 
A 
解 相 关 示 例 请 参考 11. er a) 


不 过 ， 如 果 硕 望 元 素 至 少 具 有 某 一 特 
定 高 度 ， 可 以 设置 min-height。 a 
日 后 交 多 ,元素 的 高 度 会 自动 按 需 增长 。 
这 是 height 与 min-height 的 区 别 ，width 
和 min-width 也 是 类 似 的 。 

或 许 你 还 有 所 疑虑 ， 实 际 上 ,很 多 原 
因 都 会 导致 内 容 增 长 。 你 的 内 容 或 许 来 自 
2 
Rr ol 者 可 能 增 大 其 浏览 器 的 字体 大 
小 ， 寝 盖 你 指定 的 样式 。 


11 .8 在 元 素 周 围 添加 内 边 


顾名思义 ， 内 边 距 就 是 元 素 内 容 周 围 、 
边框 以 内 的 空间 。 根 据 上 文 的 类 比 ， 内 边 距 
就 像 是 图 画 ( 内 容 ) 与 夯 框 ( 边框 ) 之 间 的 
讨 边 。 可 以 改变 内 边 距 的 厚度 ( 如 图 11.8.1 
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11.8 在 元 素 周 围 添加 内 边 距 D1 


到 图 11.8.4 所 示 ) , 不 能 改变 它 的 颜色 或 纹理 。 
显示 在 内 边 距 区 域 的 颜色 和 纹理 是 元 素 的 至 
景 , 是 通过 background、background-color( 参 
见 图 11.8.1 ) 或 者 background-image 设置 的 。 





.about { 
background-color: #2b2b2b; 
padding: 


.3125em .625em .625em; 


/* 

跟 padding: 5px 10px 10px; 

是 一 样 的 , 因为 字体 大 小 是 16px, 且 
.3125 = 5px/16px 

.625 = 10px/16px 

4 





图 11.8.1 同 外 边 距 类 似 ， 如 果 为 padding 设置 四 
个 值 ， 那 么 它们 分 别 表 示 上 、 右 、 下 、 左 (按时 钟 
顺序 ) 内 边 距 。 因 此 在 这 里 四 个 边 都 有 内 边 距 〈 实 
见 结果 如 图 11.8.2 所 示 ) 





ABOUT ME 





容 就 会 贴 
到 边界 。 添 加 内 边 距 后 ， 元 素 里 的 内 容 外 围 就 会 产 
生 一 些 空 日 ( 右 ) 。 同 时 ,在 内 边 距 的 区 域 会 显示 
背景 色 。 (如果 添加 .about { border: 1px solid 


图 11.8.2 ”如 果 不 设置 内 边 距 ( 左 ) ， 内 








red; }, 则 整个 盒子 的 外 围 会 显示 一 条 红色 的 边框 ， 

边框 位 于 内 边 距 的 外 面 。 ) 可 以 看 到 ， Co 
上 边 和 下 边 的 空白 要 大 于 内 边 距 指定 的 大 小 。 

由 于 浏览 硕 为 标题 (ABOUT ME ) 0 
外 边 距 和 为 段落 ( 如 图 像 下 面 的 段落 ) 设置 的 默认 
下 外 边 距 造成 的 。 它 们 外 围 的 .about 盒子 的 内 边 
距 计 这 些 外 边 距 在 盒子 内 部 生效 
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.nav-main a { 
color: #292929; 
display: inline-block; 
font-family: ‘Open Sans', sans-serif; 
font-size: 1.125em; /* 18px/16px */ 
font-weight: 700; 
padding: .5em 1.15em .5em 1.4em; 
text-transform: uppercase; 


} 


/* 

跟 padding: 9px 20.7px 9px 25.2px; 
一 样 , 因为 字体 大 小 为 18px, 且 

.5 = 9px/18px 

1.15 = 20.7px/18px 

1.4 = 25.2pXx/18px 

yy 





11.8.3 ”现在 ,我 们 为 主导 航 里 的 每 个 链接 都 添 
加 了 内 边 距 。 在 下 一 部 分 为 其 添加 边框 之 后 ， 上 下 
内 边 距 会 更 加 明显 


HOME ABOUT CONTACT 


HOME ABOUT CONTACT 





图 11.8.4 ”这 些 链 接 之 前 都 挤 在 一 起 (上 ) ， 添 加 
了 内 边 距 后 ， 它 们 就 有 “呼吸 ”的 空间 了 (下) 


padding 的 简 记 法 
同 border 和 margin 属 性 一 样 ， 
padding 也 可 以 使 用 简 记 法 ， 从 而 不 必 使 用 
padding-top、padding-right 等 属性 为 每 个 
边 都 单独 设 定 内 边 距 。 
paddine op WV 
个 位 永 会 磋 川 全 路 四 个 访 
口 padding: 5px 9px; 一 一 使 用 两 个 值 ， 
WR 本 罗 交 同 二 和 本 册 一 二 更 友 
一 个 值 会 应 用 于 左右 两 边 。 


D padding: 5px 9px 11px; 一 一 使 用 三 
人 人 NE 
第 二 个 值 会 应 用 于 左右 两 边 ， 第 三 
人 人 
82 

口 padding: 5px 9px 11px 0; 一 一 使 用 
四 个 值 ， 它 们 会 按照 时 钟 顺 序 ， 依 
人 
图 11.8.3 和 图 11.8.4 所 示 ) 。 

内 边 距 的 值 可 以 使 用 像素 、 百 分 数 、 

em 或 rem 的 组 合 。 


在 元 素 周 围 添加 内 边 距 的 方法 

输入 padding: Xx;， 这 里 的 x 是 要 添 加 的 
空间 量 ， 表 示 为 市 单位 ( 通 第 为 em 或 像 系 ) 
的 长 度 或 父 元 素 宽 度 的 百分数 (如 20% ) 。 

也 可 以 输入 padding-top: x;、padding- 
right: x;、padding-bottom: Xx; 或 者 padding- 
left: x; 单独 为 一 个 边 添 加 内 边 距 ， 参 见 
图 11.8.5 和 图 11.8.6。 








.links { 
padding-left: 0; 
width: 270px; /* 90% = 270px/300px */ 





} 





11.8.5” 侧 边栏 包含 两 组 链接 ， 每 组 都 包含 在 
一 个 带 class="links" 的 无 序列 表 (ul) 里 。 这 里 
将 内 边 距 设 为 0， 以 覆盖 浏览 器 默认 的 40px ( 如 
图 11.8.6 所 示 ) 。 宽 度 的 样式 能 确保 链接 在 踊 侧 边 
栏 (先前 设 定 为 300 像 系 过 ) 右 侧 30 像 系 的 地 方 
折 行 ( 关于 列表 ,参见 第 15 章 ; 关于 列表 的 默认 
左 内 边 距 ， 重点 参考 15.3 市 ) 











关于 如 何 确定 图 11.8.1 和 图 11.8.3 中 
的 em 值 的 信息 参见 11.10 节 补 充 材 料 。 


图 灵 社区 会 员 wenshanjun 专 享 尊重 版 权 


POPULAR POSTS 


The City Named After Queen 
Victoria » 


POPULAR POSTS 

The City Named After Queen 
Victoria » 

Heaven on Earth? Let's Have 
Dinner in Paris » 

Enjoying Strauss at the Volksoper 
in Vienna » 

RECENTLY SHARED 


Heaven on Earth? Let's Have 
Dinneri in 和 » 


图 11.8.6 列表 默认 的 缩 间 进 样式 很 难看 (上 ) ， 
在 ， 由 于 取消 了 内 边 距 ， 链 接 与 标题 对 齐 了 


默认 情况 下 ， 元 素 的 width 和 height 

不 包含 padding 的 大 小 。 参 见 前 一 节 的 “宽度 

外 边 距 和 auto” 部 分 及 11.5 节 (其 中 还 es 
了 如 何 履 盖 默 认 的 盒 模型 设置 ) 。 


关于 背景 样式 的 设置 ， 参 见 10.10 节 、 
14.6 节 和 14.7 节 。 

6 内 边 距 不 是 继承 的 。 

11.9 “ 坟 置 边框 


可 以 在 元 素 周围 创建 边框 〈 人 参见 图 11.9.1 
和 图 11.9.2 ) ， 或 针对 元 素 的 某 一 边 设置 边框 
(参见 图 11.9.3 ~ 图 11.9.10 ), 并 设置 它 的 厚度 、 
风格 和 颜色 。 如 有 果 指 定 了 内 边 距 (参见 11.8 
方 ) ， 边 框 将 包围 在 元 素 内 容 和 内 边 距 的 外 
面 (参见 图 11.9.5 ~ 图 11.9.10)。 图 11.9.11 
和 图 11.9.12 展示 了 我 们 可 用 的 所 有 边框 样式 。 








.about img { 


border: 5px solid #bebebe; 
} 


图 11.9.1 边框 可 以 应 用 于 任何 元 素 ， 包 括 图 像 。 
如 果 和 希望 对 一 个 以 上 的 元 系 设 置 相同 的 边框 样式 ， 
最 好 引入 一 个 类 ， 从 而 可 以 复 用 ,例如 .frame { 
border: 5px solid #bebebe; } 








图 灵 社 区 会 员 








My name is Eleina Shinn. Exploring the 





unknown and i about our a net is what 








图 11.9.2 a 


.nav-main { 

六 每 色光 

border-top: 5px solid #019443; 

许 欢 多 类 

border-bottom: 1px solid #c8c8c8; 
} 


.nav-main li { 
border-left: 1px solid #c8c8c8; 
display: inline-block; 


.nav-main 1i:first-child { 
border-left: none; 


} 


图 11.9.3 ”这些 简单 的 边框 对 页 面 的 主导 航 和 头 部 
起 到 了 下 定义 的 作用 ( 如 图 11.94 所 示 ) 。 作 为 
一 种 稼 见 的 做 法 ， 每 个 导航 链接 都 包含 在 一 个 列 
表 项 目 (1i) 里 。 注 意 ， 这 里 对 第 一 个 1i 使 用 了 
border-left: none;， 以 取消 其 左边 框 ( 即 改 回 至 
它 的 默认 样式 ) 

















HOME ABOUT CONTACT 
11.9. 4 ee 让 导航 链接 彼 
此 分 开 ， 还 能 有 效 地 区 分 页 面 头 部 和 它 下 面 的 内 容 


。 水 平 的 边框 会 延伸 至 页 面 
的 整 发 个 宽度 


wenshanjun 专 享 尊重 版 权 


.nav-main { 


padding: .45em 0 .5em; /* 7px 0 8px */ 
} 


使 格局 发 生 了 微妙 的 变化 


HOME 


ABOUT CONTACT 





图 11.9.6 ”内 边 距 将 水 平 线 和 垂直 线 分 开 了 


1. 定义 边框 风格 

输入 border-style: type， 其 中 的 type 
可 以 是 none、dotted ( 点 线 ) 、dashed ( 虚线 ) 、 
solid( 实 线 ) double( 双 线 ) .groove( 档 线 ) 、 
ridge( 准 线 )、inset( 周边 ) 或 outset( 凸 边 ) 。 


2. 设置 边框 宽度 
输入 border-width: n， 这 里 的 n 是 需要 
的 宽度 〈 含 单位 ， 如 4px ) 。 


3. 设置 边框 颜色 

输入 border-color: color， 这 里 的 color 
是 颜色 名 称 、 十 六 进 制 值 或 RGB、HSL.、 
RGBA HSLA 颜色 ( 参见 7.5 节 的 “CSS 颜 色 ”)。 


4. 使 用 简 记 法 同时 设置 多 个 边框 属性 

(1) 输入 border。 

(2) 如 采 需 要 ， 输 人 -top、-right、 
-bottom 或 -left 将 边框 效果 限制 在 某 一 条 
四 < 

(3) 如 果 需 要 ， 输 入 -property， 这 里 的 
property 可 以 是 style( 风 格 ) 、width (宽度 ) 
或 color (颜色 ) ， 仅 使 用 单个 属性 设置 边框 。 

(4) 输入 冒号 (: ) 。 

(5) 输入 恰当 的 值 ( 如 前 面 介绍 的 那样 ) 。 
如 采 跳 过 了 第 (3) 步 ， 则 可 以 指定 所 有 三 种 





边框 属性 (如 border:1px solid 和 border- 
right: 2px dashed green; ) 。 如 果 在 第 (3) 
步 中 指定 了 一 种 属性 ， 则 只 能 使 用 这 种 属 
性 可 以 接受 的 值 ( 如 border-right-style: 
dotted; ) 。 


默认 情况 下 ，Internet Explorer 会 对 
作为 链接 的 图 像 添加 一 个 蓝 色 的 边框 。 为 了 
取消 这 一 样式 ， 可 以 在 样式 表 中 添加 inmg { 
border: none; }。 这 里 ,示例 页 面 也 加 入 了 
这 一 规则 ， 因 为 网 站 的 标识 就 位 于 一 个 指向 
主页 的 链接 里 面 。 (这 个 例子 是 主页 ， 但 整 
个 网 站 的 页 面 都 使 用 相同 的 标识 代码 。 ) 


border 简写 属性 及 各 个 边框 属性 

(border-width、border-style 和 border- 
color ) 均 可 接受 一 至 四 个 值 。 如 果 使 用 一 个 
值 ， 那 么 它 会 应 用 于 全 部 四 个 边 。 如 果 使 用 
两 个 值 ， 那 么 前 一 个 值 会 应 用 于 上 下 两 边 ， 
后 一 个 值 会 应 用 于 左右 两 边 。 如 果 使 用 三 个 
值 ， 那 么 第 一 个 值 会 应 用 于 上 边 ， 第 二 个 值 
会 应 用 于 左右 两 边 , 第 三 个 值 会 应 用 于 下 边 。 
如 果 使 用 四 个 值 ， 那么 它们 会 按照 时 钟 顺序 ， 
依次 应 用 于 上 、 右 、 下 、 左 四 个 边 。 


6 妥 让 边框 灵 示 出 来 ， 至 少 必须 定义 边 
框 样式 。 如果 没有 定义 样式 , 就 不 会 显示 边框 。 
边框 样式 的 默认 值 是 border-style: none。 


如 果 使 用 简 记 法 ， 如 border 或 
border-left 等 ， 则 未 提供 的 属性 将 显示 其 
默认 值 。 因 此 ，border: 1px black; 相当 于 
border: 1px black none;， 这 意味 着 不 会 显 
示 边 框 (即便 在 之 前 使 用 border-style 指定 
了 边框 样式 ) 。 
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边框 的 默认 颜色 是 元 素 的 color 属性 
的 值 (参见 10.9 节 ) 。 


border 属性 可 用 于 表格 及 其 单元 格 ， 
相关 示例 参见 18.1 节 

默认 情况 下 ,元 素 的 宽度 和 高 度 设置 
不 包括 边框 大 小 。11.7 节 第 一 条 提示 解释 了 
如 何 恬 盖 默 认 设置 。 

CSS3 引入 了 border-image 属性 。 除 


Internet Explorer 以 外 , 浏览 器 对 它 的 支持 程度 
好 (参见 http://caniuse.com/#search=border- 
ms) 。 关于 border-image， 参见 wwwsitepoint.cony/ 


css3-border-image 和 css-tricks.com/。 


边框 不 是 继承 的 。 


.about h2， 
.mod h2 { 
font-size: 0.875em; 


} 


.about h2， 
.mod h2， 
.nav-main a { 
font-family: ‘Open Sans',sans-serif; 


font-weight: 700; 
text-transform: uppercase; 


} 


.mod h2 { 
border-bottom: 1px solid #dbdbdb; 
padding-bottom: 0.75em; 


图 11.9.7 我 在 一 条 声明 中 为 多 个 标题 添加 了 边 
框 ， 效 果 参 见 图 11.9.8 (名 为 mod 的 类 代表 了 页 面 
中 的 一 个 通用 模块 ) 


图 灵 社 
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MY TRAVELS 


POPULAR POSTS 


The City Named After Queen 


RECENTLY SHARED 


saven on epg Let's Have 





图 11.9.8 我 们 对 附注 栏 中 的 三 个 标 是 也 应 用 了 同 
样 的 样式 ， 底 部 的 内 边 距 确保 了 边框 和 标题 文本 之 
间 拉 开 了 一 点 距离 





.footer p { 
font-size: .6875em; /* 11px/16px */ 


} 


.post-footer { 
border-bottom: 1px solid #dbdbdb; 
border-top: 1px solid #dbdbdb; 
padding-bottom: .7em; /* 7.7px/11px */ 
padding-top: .7em; 





图 11.9.9 除了 都 有 一 个 上 边框 ， 这 里 还 对 每 篇 博 
客 文章 下 方 的 页 脚 应 用 了 相似 的 效果 ( 如 图 11.9.8 
所 示 ) 。 每 个 这 样 的 页 脚 都 是 一 个 带 class="post- 
footer" 的 段落 


Posted in Califomia., Los Angales and Garden * May 17, 2013 at 11:20am 


Posted in Califernia, Les Angoles and Gardon = May 17, 2013 at 11:20am 





图 11.9.10 ”如 果 没 有 上 下 内 边框 (如 图 11.9.7 所 
示 ) ， 则 边框 几乎 会 贴 着 文字 (上 ) 。 添 加 了 内 边 
框 后， 效果 看 起 来 好 多 了 (下 ) 





又 会 员 wenshanjun 专 享 尊重 版 权 





border: 10px solid red; 
padding: 15px; 


.ddd { 
border-width: 4px; 
border-style: dotted dashed double; 


lL 


.ridge { 
border-style: ridge; 
border-color: orange; 


} 


.groove { 
border-style: groove; 
border-color: purple; 


lL 


.inset { 
border-style: i 
border-color: 


l 


.Outset { 
border-style: outset; 
border-color: green; 





图 11.9.11 在 这 个 例子 中 ， 我 为 每 个 段落 设置 了 
内 边 距 和 默认 边框 。 然 后 ， 对 第 一 个 段落 设置 了 应 
用 于 四 个 边 的 边框 宽度 ， 并 为 每 个 边 设置 了 不 同 的 
样式 。 对 于 余下 的 四 个 段落 ， 使 用 一 条 声明 并 在 其 
中 重复 10px 比 通过 两 个 属性 分 开设 置 样式 和 颜色 
要 方便 一 些 


相合 得 
| ardar Styiaa 











A Sx border trom top, ee batam, lat: 
dotiad, dashed, doutle, solid 


Hera's a paragraph wih a TOm ridge border 


Hare's one with a 10px groove bondes. 


| And hera's one with a 10px outgat borger, 


| 
Anae hara's onea wilh a TOre inset border. 





图 11.9.12 各 浏览 需 对 边框 样式 的 处 理 方式 并 不 
完全 相同 。 这 是 在 Firefox 中 显示 的 不 同 边框 样式 ， 
从 中 可 以 了 解 到 不 同样 式 的 差异 。 男 见 彩 插 

图 灵 社 区 会 员 











11.10 ”设置 元 素 周 围 的 外 边 距 


外 边 距 是 元 系 与 相 邻 元 隶 之 间 的 透明 空 
间 (参见 图 11.10.1 和 图 11.10.2 ) 。 关 于 它 与 
元 素 边框 和 内 边 距 的 关系 ， 人 参见 11.5 市 。 





color: #212121; 
font-family: “Lato", sans-serif; 


font-size: 3.25em; /* 36px/16px */ 


font-weight: 300; 
letter-spacing: -2px; 
line-height: .975; 


margin-bottom: .4125em; /* 21.45px */ 








11.10.1 我 用 目 己 的 设置 覆盖 了 默认 的 下 外 边 
距 设 置 ， 关 于 使 用 em 设置 外 边 距 的 说 明 参 见 补 充 
材料 


Sunny East Garden at the 
Getty Villa 


Sunny East Garden at the 
Getty Villa 

















图 11.10.2 博客 条 上 日 标题 和 图 像 之 间 的 默认 空间 
太 大 了 (上 图 ) ， 重 新 设置 后 两 者 更 为 紧凑 了 ， 看 





起 来 好 很 多 (下 图 ) 





设置 元 素 外 边 距 的 方法 
输入 margin: x， 其 中 的 x 是 要 添加 的 空 





间 量 ， 可 以 表示 为 长 度 、 相 对 父 元 系 宽 度 的 
百分数 或 auto。 

也 可 以 输入 margin-top: x;、margin-right: 
X;、margin-bottom: Xx; (参见 图 11.10.1 和 
图 11.10.3 ) 或 者 margin-left: Xx; 为 元 素 的 一 
条 边 应 用 外 边 距 。 
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.map { 
margin: 1.4375em 0 .8125em; 


/* 23px 0 13pX */ 


} 


.links { 
margin: 1.5em 0 4.125em; 


/* 24px 0 66px */ 
padding: 0; 


.links li { 
margin-bottom: 1.1em; 


} 


图 11.10.3 以 下 几 条 样式 规则 处 理 几 个 元 素 之 间 
的 间距 ， 第 一 条 规则 为 地 图 周围 留 出 了 一 些 空间 ， 
如 图 11.10.4 所 示 ， 后 面 两 条 规则 影响 了 附注 栏 中 
的 链接 ， 如 图 11.10.5 所 示 





MY TRAVEL5S 








图 11.10.4 
外 边 距 解 决 了 这 一 问题 ( 右 图 ) 


地 图 和 两 个 标题 之 间 显 得 很 搞 ( 左 图 )， 


POPULAR POSTS 


The City Named After Queen 
Victoria » 


Heaven on Earth? Let's Have 
Dinner in Paris » 
Enjoying Strauss at the Volksoper 


in Vienna » 


RECENTLY SHARED 


Heaven on Earth? Lets Have 
Dinner in Paris » 








图 11.10.5 每 组 链接 之 间 的 空 际 更 大 了 ,不 同 链 
接 之 则 的 空 际 也 变 得 更 大 了 (关于 之 前 的 样子 ， 参 
风 11.8 市 的 图 11.8.6 ) 





11.10 设置 元 素 周 围 的 外 边 距 904 
如 果 对 margin 使 用 一 个 值 ， 这 个 值 


就 会 应 用 于 全 部 四 个 边 。 如 果 使 用 两 个 值 ( 参 
见 图 11.10.6) ， 那 么 前 一 个 值 会 应 用 于 上 下 
两 边 ， 后 一 个 值 会 应 用 于 左右 两 边 。 如 果 使 
用 三 个 值 (参见 图 11.10.3 ) ， 那 么 第 一 个 值 
会 应 用 于 上 边 , 第 二 个 值 会 应 用 于 左右 两 边 ， 
第 三 个 值 会 应 用 于 下 边 。 如 果 使 用 四 个 值 ， 
那么 它们 会 按照 时 钟 顺序 , 依次 应 用 于 上 、 右 、 
下 、 左 四 个 边 。 


margin 属性 的 auto 值 依赖 于 width 
属性 的 值 (如 图 11.10.6 所 示 ) ,参见 11.7 节 。 


如 果 元 素 位 于 另 一 个 元 素 的 上 面 ， 对 
于 相互 接触 的 两 个 margin ( 即 元 素 相 互 接触 
的 下 外 边 距 和 上 外 边 距 ) ， 仅 使 用 其 中 较 大 
的 一 个 ， 另 一 个 外 边 距 会 被 县 加 。 左 右 外 边 
距 不 登 加 。 


确定 em 值 时 ， 可 能 需要 在 手头 准备 
一 个 计算 器 。 此 外 ， 还 可 以 使 用 http://pxtoem. 


com 这 样 的 工具 ， 它 们 可 以 帮 你 计算 em 值 。 


外 边 距 不 是 继承 的 。 


-page { 
border: 1px solid red; /* 临时 设置 */ 


margin: 0 auto; 
width: 960px; 





图 11.10.6 ”让 网 页 的 主体 内 容 在 浏览 器 里 水 平 居 
中 显示 是 一 种 第 见 的 样式 ， 要 实现 这 种 样式 其 实 并 
不 难 。 首 和 完 ， 对 内 容 的 容 带 添加 width (也 可 以 用 
max-width ) 。 然 后 将 其 左右 外 边 距 都 设 为 auto。 
这 样 做 的 话 ， 浏 览 圳 会 基于 浏览 需 宽 度 和 容 需 宽度 
之 差 计 算 这 些 外 边 距 。 在 本 例 中 ， 带 class="page" 
的 div 包含 了 整个 页 面 。 
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< 
SEE 





11.10.7 页 面 内 的 内 容 可 能 是 左 对 齐 的 ， 但 
页 面 本 身 却 位 于 浏览 絮 窗 口 的 中 间 。 这 里 临时 为 
.page div 添加 了 一 个 红色 的 边框 ， 好 让 效果 更 为 
SunnyEastGardenatthe 明显 。 这 里 还 将 该 div 的 宽度 设 为 960px， 从 而 为 
Getty Villa 侧 边 框 腾 出 空间 。 我 们 将 在 下 一 节 学 习 如 果 将 附注 
栏 放 到 那个 位 置 


2 
MOME 











理解 内 边 距 和 外 边 距 的 em 值 

当 em 位 用 于 内 边 距 和 外 这 焉 时 亿 的 值 是 相对 于 亏 未 的 守 休 大 "的 0 不 证 相对 于 全 
元 素 的 字体 大 小 的 (你 可 能 会 这 样 认为 ) ， 具 体 参 见 10.6 节 。 计 算 外 边 距 或 内 边 距 的 em 值 
的 公式 为 : 

要 指定 的 字体 大 小 /元 素 的 字体 大 小 = 值 

设想 一 个 简单 的 例子 , 其 中 的 段落 定义 了 p { font-size: 14px; padding: .5em; }。 那么 ， 
它 在 四 个 边 的 内 边 距 都 是 7 像素 ， 因 为 7/14 = 0.5。 如 果 将 字体 大 小 改 为 20px， 内 边 距 就 会 
自动 变 成 10 像素 (10/20 = 0.5 ) 。 这 就 是 em 这 样 的 相对 单位 的 作用 一 一 随 着 布局 放大 或 缩小 ， 
布局 的 比例 始终 不 变 。 

外 边 距 也 是 类 似 的 。 如 图 11.10.1 所 示 的 ,， hi 的 字体 大 小 大 约 是 36 像 素 (3.25em = 
36px/16px ) 。 因 此 ，0.4125em 的 下 外 边 距 大 约 为 21.45 像素 (21.45/36 = 0.4125 ) 。 

像 em、 百 分 数 以 及 rem 这 样 的 相对 单位 在 响应 式 网 页 中 的 优势 更 为 明显 (响应 式 Web 
设计 将 在 下 一 章 进 行 介绍 ) 。 不 过 它们 在 固定 宽度 的 布局 中 也 有 作用 。Trent Walton 介绍 了 一 
个 强大 的 使 用 相对 单位 的 例子 ， 见 http://trentwalton.com/2013/01/07/flexible-foundations。 

对 于 内 边 距 和 外 边 距 的 设置 , 建议 使 用 相对 单位 , 就 像 本 书 的 例子 中 演示 的 那样 。 我 知道 ， 
在 刚刚 开始 学 习 网 站 构建 的 时 候 ， 需 要 一 段 时 间 去 习惯 这 种 做 法 。 这 也 是 我 既 提 供 em 值 又 
提供 像素 值 的 原因 。 刚 开始 的 时 候 ， 你 可 能 会 感觉 对 内 边 距 和 外 边 距 使 用 像素 更 舒服 一 些 。 
这 样 做 没有 问题 。 你 可 以 在 自己 认为 合适 的 时 候 转 向 em。 

这 里 需要 指出 一 条 简短 的 说 明 : 如 果 要 对 内 边 距 和 外 边 距 使 用 百分数 ,通常 不 会 将 它们 
用 于 上 下 边 距 的 值 ， 因 为 这 样 的 值 是 基于 其 包含 块 的 澳 度 的 。 


11.11 使 元 素 浮 动 


可 以 通过 float 属性 使 元 系 浮 动 在 文本 ”其 他 元 素 周 围 ， 也 可 以 使 用 这 种 技术 创建 多 
或 其 他 元 素 上 。 可 以 使 用 这 种 技术 让 文本 环 。 栏 布局 等 ， 如 图 11.11.4 和 图 11.11.5 所 示 。 
绕 在 图 像 (参见 图 11.11.1 ~ 图 11.11.3 ) 或 者 
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An hour and ahalf aboard a comfortable car ferry is all it takes to transport you from 
the moderm, urban oe that is ee Vancouver to colonial Vancouver Island, 





图 11.11.1 这 是 _ 篇 博客 文章 的 片 股 。 默 认 情 况 
下 ， 段 落 显示 在 图 像 的 下 面 。 段 落 没 有 设置 宽度 ， 
文字 折 行 是 因为 段落 (以 及 图 像 ) 位 于 main 元 素 
中 ， 而 该 元 素 在 先前 设置 了 600 像素 的 宽度 ( 又 如 
图 11.11.3 所 示 ) 。 图 像 的 宽度 (370 像 系 ) 是 在 
HTML 中 指定 的 。 如 何 让 文字 围绕 在 图 像 周 围 呢 ? 


























.post-photo { 
float: left; 
margin-bottom: 2px; 
margin-right: 22px; 





图 11.11.2 ”这 很 简单 ! 只 要 让 一 个 设置 了 宽度 的 
元 素 浮 动 ， 在 正常 情况 下 显示 在 它 下 面 的 内 容 就 会 
流动 到 它 的 周围 ( 前 提 是 这 些 内 容 没 有 设置 宽度 ) 。 

这 里 的 图 像 ( 融 有 class="post-photo" ) 和 段落 就 
满足 这 些 条 件 ， 因 此 会 形成 如 图 11.11.3 所 示 的 歼 
果 。 外 边 距 的 设置 让 图 像 和 文字 之 间 有 了 一 些 空 际 


The City Named After Queen 

















An hoar and a half aboard a 
comfortable tar ferry is all tt 
takes to transport you fronm 
the modern, Urban space that 
is Greater Vancouver to 
colonial Waneouwer [Island 
seemingly stueck in the 1 本 
century. The main town of 
Wiatoria showcases all the 


picturesque gems the British 
Empire was ao prowd of at the height of ita spanning expansion, Rapresentative yet 
inviting Victorian style municipal buihlings, a protected harbor amd cobblestone 
qtreets papulated with srnall shopa and nrtiaanal ... Raead Mare 


Prembesd in ls lsd, Gan ard Raadirip * May Oe 2013 al Bdrm 


图 11.11.3 图像 向 左 浮动 时 ， 如 果 文 本 的 高 度 大 
于 图 像 的 高 度 ， 文 本 会 环绕 在 图 像 周 围 。 这 个 例 
子 使 用 的 是 图 像 ， 但 你 也 可 以 使 用 同样 的 方法 让 
figure 、aside 或 其 他 元 素 浮动 
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main { 
float: left; 
width: 600px; /* 62.5% = 600px/960px */ 


} 


.Sidebar { 
float: right; 
margin-top: 1.875em; /* 30px/16px */ 
width: 300px; /* 31.25% = 300px/960px */ 





图 11.11.4 可 以 用 类 似 的 方法 让 两 个 元 素 并 排 在 
一 起 ， 如 主要 内 容 和 附注 栏 。 它 们 都 指定 了 宽度 ， 
因此 都 可 以 进行 浮动 


站 
na > 和 4 
本 


HOME ABOUT CONTACT 


Sunny East Garden at the 
Getty Villa 


I i hard to believe, bak 由 ee are sbout 300 varieties of plarits of the East Carden sl 
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Mrarnorw sd jsfrrl ves sand wereraded by siashg water froer, wo soilentsrad 
Souriains, | coxskés'l help bwul Bunk cd anceel Rome and the :oile of (he fardea 20 


ms splinee of Peace and Rosa Mo 
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图 11.11.5 ”有 瞧 ， 一 个 两 栏 布局 形成 了 ! 不 过 ， 
两 栏 之 间 的 东西 是 什么 呢 ? 让 我 们 仔细 看 看 ( 如 
图 11.11.6 所 示 ) ……: 


让 文本 环绕 元 素 

(1) 输入 float:。 

(2) 输入 left， 让 元 素 浮 动 到 左边 ， 其 他 
内 容 围绕 在 它 右边 ; 

或 者 输入 right， 让 元 素 浮动 到 右边 ， 其 
他 内 容 围 绕 在 它 左边 

或 者 输入 none, 让 元 素 完 全 不 浮动 。( none 
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是 默认 值 ， 因 此 只 有 在 特定 情况 下 需要 窗 盖 
某 个 浮动 元 素 的 样式 规则 时 才 需 要 用 到 它 。) 

(3) 使 用 width 属性 显 式 地 设置 元 素 的 宽 
度 (参见 11.7 节 ) ， 以 便 有 空间 放置 围绕 它 
的 内 容 。 


2013Le 
journal. All 


hh ABOUT ME 





图 11.11.6 这 是 页 脚 ! 它 怎么 会 在 那里 呢 ? 首先 ， 
记 住 我 们 的 页 面 是 960 像素 宽 ，main 是 600 像素 
宽 ， 而 附注 栏 是 300 像 系 客 。 两 位 加 相反 的 方 同 浮 
动 ， 中 间 就 会 留 下 60 像素 的 空 际 。 其 次 ， 如 果 你 
看 看 HTML， 你 会 发 现 main 的 代码 就 在 附注 栏 的 
前 面 ， 而 附注 栏 就 在 页 脚 前 面 。 由 于 两 栏 都 是 浮动 
的 ， 因 此 页 脚 的 内 容 就 会 流动 到 它们 之 间 ， 就 像 
图 11.11.3 中 的 段落 文字 环绕 图 像 一 样 。 后 面 将 介 
绍 如 何 让 页 脚 回 到 下 面 的 位 置 





记 住 ， 你 选择 的 方向 是 应 用 于 需要 浮 
动 的 元 素 的 ， 而 不 是 应 用 于 环绕 它 的 元 素 的 。 
在 使 用 float:left 时 ， 页 面 的 其 他 部 分 围绕 
在 右边 ， 反 之 亦 然 。 


float 属性 不 是 继承 的 。 


11.12 ”控制 元 素 浮动 的 位 置 


我 们 可 以 控制 浮动 什么 时 候 俘 止 ， 不 过 
在 介绍 这 些 内 容 之 前 ， 需 要 进一步 理解 float 
属性 是 如 何 影响 页 面 的 。 

考虑 图 11.12.1 中 的 HIML。 这 是 一 段 
博客 文章 的 介绍 (不 过 没有 标题 ) 。 可 以 看 


到 ，section 元 素 包 含 了 所 有 相关 的 内 容 。 
假设 该 元 素 的 样式 与 之 前 的 一 样 ， 只 是 添加 
了 一 个 花哨 的 育 景色 ， 从 而 突出 其 高 度 (如 
图 11.12.2 所 示 ) 。 








<section class="post"> 
<img ... class="post-photo" /> 


<div class="post-blurb"> 
<p>An hour and a half ...</p> 


</div> 


<footer class="footer"> 
<p class="post-footer">Posted ...</p> 
</footeT> 
</section> 





图 11.12.1 在 这 个 简单 的 结构 中 ， 博 客 文章 的 
所 有 介绍 性 内 容 都 放 在 一 个 section 中 。 在 贯 容 
本 章 的 例子 中 ,<hi>The City Named After Queen 
Victoria</h1> 位 于 section 中 img 前 的 位 置 





图 11.12.2 图像 应 用 了 float: left;， 这 样 文字 
就 环绕 在 了 它 旁 边 。section 元 素 ( 黄色 区 域 ) 的 高 








度 看 起 来 好 像 受 到 了 图 像 的 影响 ,但 事实 并 非 如 此 


浮动 的 元 素 对 文档 流 的 影响 与 非 浮动 元 
素 的 影响 是 不 同 的 。 如 图 11.12.2 所 示 ， 图 像 
等 浮动 元 素 会 让 接 下 来 的 内 容 环绕 在 它 周 围 。 
不 过 ， 它 并 不 会 影响 父 元 素 或 其 他 祖先 元 素 
的 高 度 ， 因 此 从 这 一 点 来 说 ， 它 不 属于 文档 
流 的 一 部 分 。 

为 了 演示 这 一 点 ， 我 移 除 了 博客 摘要 中 
的 一 部 分 文字 ( 如 图 11.12.3 所 示 ) 。 你 或 许 
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会 对 此 感到 司 讶 一 一 尽管 图 像 是 section 的 子 
元 系 ， 但 section 却 比 图 像 更 矮 一 些 ! 只 有 普 
通 文档 流 中 的 内 容 会 影响 父 元 素 的 高 度 。 在 
这 个 例子 中 ， 这 样 的 内 容 包 括 博 客 摘 要 文字 
和 博客 文 草 的 页 脚 ， 但 不 包括 图 像 。 














图 11.12.3 
如 何 影 响 文档 流 的 了 一 一 它 完 全 不 影响 父 元 系 的 


局 度 


现在 你 可 以 清晰 地 看 到 浮动 元 素 是 


页 脚 为 什么 会 显示 在 这 里 呢 ? 它 之 前 的 
内 容 变 短 之 后 ， 它 移 到 了 图 像 的 劳 边 。 不 过 ， 
这 显然 不 是 我 们 硕 望 看 到 的 效果 。 毕 葛 ， 你 
的 博客 文章 的 摘要 可 能 很 得 。 如 何 改变 这 样 
的 样式 呢 ? 

老 好 可 以 使 用 clear 属性 清除 浮动 效果 
(如 图 11.12.4 和 图 11.12.5 所 示 ) 。 如 果 对 
某 个 元 素 使 用 该 属性 ， 该 元 素 和 它 后 面 的 元 
系 就 会 显示 在 浮动 元 素 的 下 面 。 











.post-footer { 


clear: left; 


} 





图 11.12.4 使 用 clear: left;， 让 内 容 显示 在 浮 
动 元 素 的 后 面 


1. 让 浮动 元 素 的 父 元 素 “ 自 清除 ” 
回 过 头 来 看 11.11 节 (人 参见 图 11.11.6 ) ， 
我 们 还 有 一 个 布局 问题 有 竺 解决 。 尽 管 在 
HTML 中 页 面 的 页 脚 在 main 和 附注 栏 的 后 面 
(如 图 11.12.6 所 示 ) ,但 是 它 并 没有 显示 在 
main 和 附注 栏 的 后 面 。 
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11.12.5 现在， 博客 文章 的 页 脚 不 会 显示 在 图 
像 的 旁边 了 ， 无 论 它 前 面 的 文本 多 短 。 父 元 素 的 高 
度 也 会 相应 增加 。 可 以 为 页 脚 添加 margin-top 属性 ， 
这 样 它 不 会 紧 贴 着 图 像 。 一 旦 清除 浮动 ， 浮 动 效 果 
就 没有 了 ， 因 此 不 需要 为 图 像 后 面 的 所 有 元 素 都 应 
用 这 条 规则 














<body> 
<div class="page"> 
. [masthead|] ... 


<div class="container'"> 
<main role="main"> 


</main> 


<div class="sidebar"> 


</div> 
</div> <!-- end container --> 


<footer role="contentinfo” ...> 
<p class="legal"><small>&copy; 
2013 
?Le Journal. All Rights 
Reserved. 
=» </small></p> 
</footer> 
</div> 
</body> 
</htm]> 





11.12.6 示例 页 面 的 基本 结构 。 带 class= 
"container" 的 div 是 main 和 附注 栏 的 父 元 素 。 页 
面 的 页 脚 在 它们 的 后 面 


根据 先前 定义 的 样式 ，main 元 素 有 float: 
left; ， 附 注 栏 有 float: Tight;。 现 在 你 了 解 











了 ， 浮 动 的 元 素 不 会 影响 其 父 元 素 的 高 度 ， 1 
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这 样 你 就 能 理解 页 脚 显 示 在 徘 近 页 面 项 端 位 
置 的 原因 了 。 两 列 内 容 父 元 系 ( 作为 容 冀 的 
div ) 的 高 度 是 0 ! 不 信 ? 看 看 图 11.12.7。 











SUNNY East Gardenatthe 


11.12.7 ”如 果 应 用 样式 .container { border: 
1px solid red; }， 你 可 能 认为 容器 div 的 子 元 素 
外 围 出 现 一 条 边框 ,实际 上 不 是 ， 你 会 看 到 边框 显 
示 为 一 条 线 ， 位 于 容器 div 的 顶端 。 这 是 因为 它 所 
有 的 内 容 要 么 是 左 浮动 的 ， 要么 是 右 浮 动 的 ， 因 此 
它 的 高 度 为 0。 这 就 是 页 面 的 页 脚 直 接 显 示 在 容 需 
下 而 的 原因 

可 以 通过 为 页 脚 设置 clear: both; 解决 
这 个 问题 。 这 与 图 11.12.4 中 演示 的 方法 类 似 ， 
它 可 以 清除 浮动 ， 既 包括 左 浮动 ， 也 包括 右 
浮动 。 

这 样 做 可 以 让 页 脚 显示 在 浮动 的 列 的 下 
方 ， 但 容器 div 的 高 度 仍然 是 0。 清 除 浮动 
的 .post-footer 与 浮动 元 素 (图 11.12.1 中 的 
section， 效 果 如 图 11.12.5 所 示 ) 位 于 同一 个 
父 元 素 的 里 面 ， 但 页 面 的 页 脚 却 位 于 作为 容 
器 的 父 元 素 (如 图 11.12.6 所 示 ) 的 外 面 。 这 
意味 着 它 无 法 影响 容 带 的 高 度 、 浮 动 的 元 素 
或 不 浮动 的 元 素 。 

大 多 数 时 候 ， 这 样 做 没有 问题 。 但 如 果 
希望 为 容 絮 添加 一 个 背景 色 ， 由 于 容 带 高 度 
为 0, 不 会 显示 该 背景 色 。 解 决 的 办 法 是 让 容 
顺 自 喘 具 有 清除 译 动 的 能 

有 很 多 方法 可 以 解决 这 个 问题 ,但 最 可 
靠 的 是 使 用 所 谓 的 clearfix 方法 。 要 使 用 这 
种 方法 ， 只 需要 在 样式 表 中 引入 .clearfix 的 
规则 (如 图 11.12.8 所 示 ) ， 然 后 为 浮动 元 素 
的 父 元 系 (该 元 素 为 希望 清除 浮动 的 元 素 ) 
添加 clearfix 类 (如 图 11.12.9 所 示 ) ， 从 而 
可 以 文 撑 起 父 元 素 ， 并 能 够 添加 一 些 预期 样 
式 (如 图 11.12.10 和 图 11.12.11 所 示 ) 。 



































.Clearfix:before, 

.Clearfix:after { 
content: " "; 
display: table; 


上 


.Clearfix:after { 
clear: both; 


} 


.Clearfix { 
*z00m: 1; 





} 


11.12.8 大 量 网 站 使 用 clearfix 类 或 类 似 方法 
清除 浮动 ,本 书 不 会 对 所 有 这 些 代 码 进行 详细 解释 ， 
因为 有 些 复杂 。 不 过 请 将 它 常 备 手 涉 ， 复 制 到 每 一 
个 需要 用 到 它 的 网 站 的 样式 表 中 去 





<djv class="container clearfix'"> 
<main role="main"> 


</main> 
<«div class="sidebar"> 


</div> 
</div> 








11.12.9 对 容 需 添加 clearfix 类 会 清除 浮动 的 
main 和 附注 栏 元 素 ， 从 而 让 容 需 的 高 度 等 于 两 列 
中 较 高 的 那 一 个 的 高 度 











.container { 
background: url(../img/bg.png) 
repeat-y 629px 0; 
padding-bottom: 1.9375em; 


footer[role="contentinfo"| { 
border-top: 1px solid #cacbcb; 


} 





图 11.12.10 ”这 里 有 一 个 简单 的 5 像素 x 20 像素 
的 背景 图 像 ， 背 景 位 置 为 距 左 侧 629 像素 ， 垂 直方 
向 重复 , 从 而 为 两 栏 之 间 提 供 了 一 个 分 隔 线 。 男 外 ， 
可 以 为 页 面 的 页 脚 加 上 一 个 上 边框 ， 将 页 脚 与 其 他 
内 容 分 隔 开 
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图 11.12.11 页 面 的 页 脚 的 边框 与 两 栏 的 分 隅 线 是 
垂直 的 。 为 两 栏 的 容 需 添加 的 下 内 边 距 让 分 页 链接 
与 页 脚 之 间 产 生 了 一 些 空间 


2. 控制 元 素 浮 动 位 置 的 步骤 
(1) 输入 clear: (如 图 11.12.4 所 示 ) 。 
(2) 输入 left， 阻 止 元 素 浮动 在 该 元 素 的 
左边 ; 
或 输入 fight， 阻 止 元 素 浮 动 在 该 元 素 的 
右边 ; 
或 输入 both， 阻 止 元 系 浮 动 在 该 元 系 的 




















左右 两 边 ; 
或 输入 none ( 默认 值 ) ， 允 许 元 素 浮 动 
在 该 元 素 的 左右 两 边 。 








(3) 如 果 要 让 浮动 元 素 的 祖先 元 素 在 高 
度 上 包含 浮动 元 素 ， 并 消除 浮动 ， 可 以 使 用 
clearfix (参见 图 11.12.8 和 图 11.12.9) 或 
overflow 方法 蔚 代 第 (1) 步 和 第 (2) 步 。 ( 参 

Eu 料 “ 使 用 overflow 创建 自 清 除 浮动 
对 


应 该 将 clear 属性 添加 到 不 希望 环绕 浮 
动 对 象 的 元 素 上 (参见 图 11.124 ~ 图 11.12.6 ) 。 
因此 ， 如 果 要 让 一 个 元 素 在 右 侧 没 有 浮动 
元 素 ( 以 及 任何 靠 向 右 侧 的 元 素 ) 之 后 才 显 
示 ， 就 为 它 添加 clear: right; (而 不 是 为 浮 
动 的 元 素 添加 此 样式 规则 ) 。 而 clearfix 和 
overflow 方法 是 应 用 于 浮动 元 素 的 父 元 素 或 
祖先 元 素 的 。 


图 灵 社 区 
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过 去 的 几 年 ， 有 很 多 人 在 不 断 地 优化 
clearfix 的 代码 。 图 11.12.8 演示 的 代码 来 自 
Nicolas Gallagher( 见 ee PE com/ 
micro-clearfix-hack/, 有 “过 注意 这 篇 文章 讲 到 
的 技术 比较 深 ) ， 并 包含 在 出 的 HTML5 
Boilerplate on. 项 目 中 (该 项 目 
是 由 了 Paul Irish 发 起 的 ) 。 


浮动 元 素 的 display 属性 会 变 成 
display: block;， 哪 怕 将 其 设置 为 display: 
inline; (无 论 是 浏览 器 的 默认 样式 还 是 手动 
显 式 设置 ) ， 该 属性 值 依然 为 block。 


使 用 overflow 创建 自 清 除 浮动 元 素 


通常 ， 可 以 对 浮动 元 素 的 父 元 素 使 用 
overflow 属性 以 替代 clearfix 方法 (参见 


图 11.12.8 和 图 11.12.9 ) 。 例 如， 在 示例 页 
面 中 可 以 使 用 以 下 代码 : 
.container { 
overflow: hidden; 

) 

在 某 些 情 况 下 ，overflow: hidden; 会 
将 内 容 截 断 ， 对 此 要 多 加 注意 。 有 时 使 用 
overflow: auto; 也 有 效 ， 但 这 样 做 可 能 会 
出 现 一 个 滚动 条 ， 这 显然 是 我 们 不 希望 看 


到 的 。 有 的 代码 编写 人 员 仅 在 overflow 能 
解决 float 问题 的 情况 下 才 使 用 overflow 
方法 , 在 其 他 情况 下 则 使 用 clearfix 方 法 。 
有 的 代码 编写 人 员 则 始终 使 用 clearfix 方 法 。 

顺便 说 一 下 ， 可 以 将 clearfix 或 
overflow 应 用 到 浮动 元 素 的 任何 一 个 非 父 
元 素 的 祖先 元 素 。 这 样 做 不 会 让 父 元 素 变 

， 但 祖先 元 素 的 高 度 会 包含 浮动 元 素 。 

关于 overflow 属性 的 更 多 信息 ， 参 见 
| 
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11.13 ”对 元 素 进 行 相对 十 位 


每 个 元 素 在 页 面 的 文档 流 中 都 有 一 个 目 
然 位 置 (参见 图 11.13.1 和 图 11.13.2 ) 。 相 对 
于 这 个 原始 位 置 对 元 素 进 行 移动 就 称 为 相对 
定位 (如 图 11.13.3 和 图 11.13.4 所 示 ) 。 周 
围 的 元 素 完 全 不 受 此 影响 ( 如 图 11.13.4 所 示 )。 














<h1>Relative Positioning</h1> 


<p>When you position an element relatively, 
you《span class="example">position it 
</span> relative to its normal location. 
» </p> 


11.13.1 一 会 儿 要 定位 的 span 文本 


全 日 全 Relative Positioning 
i Relative Positioning 


Relative Positioning 


When you position an element relatively, 
you position it relative to its normal location. 





11.13.2 ”这 是 一 个 普通 段落 ， 这 里 的 呈现 没 什 
么 奇怪 的 


.example { 
position: relative; 


top: 35px; 
left: 100px; 


11.13.3” 记 住 ， 既 要 指明 采用 相对 位 置 ， 还 要 
给 出 偏 移 量 。 可 以 使 用 正 数 ， 也 可 以 使 用 人 负数。 为 
人 简化 示例 ， 这 里 使 用 的 是 像素 ,使 用 em 会 使 偏 移 
量 的 大 小 与 文本 字体 大 小 成 比例 ， 即 便 文字 变 小 或 
者 变 大 都 一 样 。 由 于 lem 等 于 元 素 的 字体 大 小 ， 
默认 情况 下 ， 文 本 通常 为 16 像素 ， 因 此 这 个 例子 
中 的 top: -3em; ， 会 使 文本 问 下 移动 48 像 系 














Relative Positioning 


Relative Positioning 


Relative Positioning 


When you position an element relatively, 
you relative to its normal location. 


position it 





11.13.4” 相 较 于 先前 的 位 置 ( 现在 显示 为 一 块 
空白 ), 文 本 与 上 边 相 距 35 像 素 , 左 边 相 距 100 像 素 。 
如 果 设 置 为 top: -55px; ， 它 的 位 置 就 会 在 hi 文本 
的 上 面 











仿 移 自然 流 中 元 素 的 步 又 

(1) 输入 position: relative;。 

(2) 输 入 top、right、bottom 或 left。 
再 输入 :dg， 这 里 的 dd 是 希望 元 素 从 它 的 目 
然 位 置 偏 移 的 距离 ， 可 以 表示 为 绝对 值 ( 如 
10px ) 、 相 对 值 (如 2em ) 或 百分数 。 值 可 
负 可 正 。 需 要 添加 其 他 侦 移 量 , 可 重复 这 一 步 。 


其 他 元 素 不 会 受到 偏 移 的 影响 ， 仍 然 
按照 这 个 元 素 原 来 的 盒子 进行 排列 。 设 置 了 
相对 定位 的 内 容 可 能 与 其 他 内 容重 县， 这 取 
决 于 top、right、bottom 和 left 的 值 。 








使 用 相对 定位 、 绝 对 定位 或 固定 定 
位 时 ， 对 于 相互 重合 的 元 素 ， 可 以 用 z-index 
属性 指定 它们 的 县 放 次 序 。 详 细 信 息 参 见 
11.15 字 。 


对 元 素 设 置 position: static， 可 以 
履 盖 position: Telative 设置 。static 是 元 
素 的 默认 值 ， 这 就 是 元 素 出 现在 常规 文档 流 
中 的 原因 。 有 关 示 例 参 见 11.15 节 。 


定位 不 是 继 承 的 O 
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11.14 ”对 元 素 进 行 绝 对 定位 


正如 前 面 提 到 的 ， 网 页 中 的 元 素 通 常 按 

它们 在 HTML 源 代 码 中 出 现 的 次 序 进行 排 
ie， 除非 
你 使 用 CSS 规则 改变 前 面 的 样式 。 也 就 是 说 ， 
如 采 img 元 素 出 现在 p 元 素 之 前 ， 图 像 就 出 
现在 段落 的 前 面 。 

通过 对 元 素 进 行 绝对 定位 ， 即 指定 它们 
相对 于 body (参见 图 11.14.3 和 图 11.14.4 ) 
或 最 近 的 已 定位 祖先 元 素 (参见 图 11.14.5 和 
图 11.14.6 ) 的 精确 位 置 ， 可 以 让 元 素 脱离 正 
第 的 文档 流 。 

这 与 相对 定位 不 同 ， 绝 对 定位 的 元 素 不 
会 在 原先 的 位 置 留 下 空白 。 这 与 让 元 素 浮 动 
也 不 同 。 对 于 绝对 定位 的 元 素 ， 其 他 元 素 不 
会 环绕 在 它 的 周围 。 事 实 上 ， 其 他 内 容 不 知 
道 它 的 存在 ， 它 也 不 知道 其 他 内 容 的 存在 。 

















<header ClLass="masthead” role="banner"> 
<p class="logo"><a href="/"><img ... /> 
‘</a></p> 
<UL class="social-sites"> 


</ul> 


<nav role="navigation"> 
<Ul class="nav-main"> 


</ul> 
</nNnav> 
</header> 





11.14.1 页 面 的 报头 〈 或 为 页 眉 ) 依次 包含 了 
网 站 的 标识 、 社 交 网 站 图 标 和 主导 航 。 它 们 的 默认 


显示 方式 如 图 11.14.2 所 示 。 接 下 来 你 将 看 到 如 何 
通过 两 个 突出 显示 的 类 类 ， 让 社交 网 站 图 标 在 报头 中 
进行 绝对 定位 





图 灵 社 区 会 员 
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11.14 ”对 元 素 进 行 


ABOUT CONTACT 





图 11.14.2 ”在 默认 文档 流 里 ， 社 交 网 站 图 标的 列 
表 位 于 网 站 标识 和 导航 之 间 。 我 们 希望 它 显 示 在 包 

含 它 的 报头 里 自 上 而 下 一 半 的 位 置 ， 并 让 它 显示 在 
报头 的 右 侧 








.masthead .social-sites { 
position: absolute; 
top: 41px; 
right: 0; 








图 11.14.3 通过 对 图 标 列表 进行 绝对 定位 ， 我 们 

已 完全 脱离 了 文档 流 。 仅 用 这 段 代 人 码 还 不 能 实现 
目的 ， 因 为 在 没有 另外 进行 指定 的 情况 下 ， 设 置 
position: absolute 的 元 素 是 相对 于 body 进行 定 
位 的 ， 如 图 11.14.4 所 示 








OT FNTACT 


Sunny East Gardenatthe 
Getty Villa 





图 11.14.4 图 标 列表 显示 在 距离 body 上 边缘 41 
像素 、 右 边缘 0 像素 的 位 置 。 很 明显 这 种 处 理 方 法 
不 好 ， 因 为 用 户 将 浏览 需 窗 口 放 大 得 越 宽 ， 图 标 列 
表 就 跟 页 面 中 的 其 他 内 容 忠 离 越 远 





对 元 素 进 行 绝对 定位 的 步骤 

(1) 输入 position: absolute;。 

(2) 根据 需要 ,输入 top、right、bottom 
或 left。 

再 输入 :4， 这 里 的 4d 是 希望 元 素 相 对 于 
其 祖先 元 素 偶 移 的 距离 (如 10px 或 2em) 或 
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相对 于 其 祖先 的 百分数 (有关 解释 参见 第 二 
条 提示 ) 。 


.masthead { 
Position: relative; 


.masthead .social-sites { 
position: absolute; 
top: 41px; 
right: 0; 





图 11.14.5 ”对 包含 图 标 列表 (参见 图 11.14.2 ) 的 
页 眉 设 置 position: relative， 从 而 让 这 些 图 标 可 
以 相对 页 眉 ( 而 不 是 body 元 素 ) 进行 绝对 定位 。 
这 样 就 可 以 让 图 标 显 示 在 我 们 希望 它 显示 的 位 置 ， 
如 图 11.14.6 所 示 





Ly ri 
ps 
二 和 A 


HOME EUT COMTACT 


11.14.6 ”完美 了 


(3) 根据 需要 , 对 其 他 方向 重复 第 (2) 步 。 

(4) 根据 需要 ， 对 希望 成 为 绝对 定位 参照 
体 的 祖先 元 素 添 加 position: relative; (如 
图 11.14.5 和 图 11.14.6 所 示 ) 。 如 果 跳 过 这 
一 步 ( 如 图 11.14.3 所 示 ) ， 将 对 元 素 相 对 于 
body 计算 偏 移 量 ( 如 图 11.14.4 所 示 ) 。 


后 网 由 于 绝对 定位 的 元 素 脱离 了 文档 流 ， 
因此 它们 可 能 会 相互 重 登 ， 或 与 其 他 元 素 重 
有 登 (这 不 一 定 是 坏事 儿 ) 。 





如 果 不 为 绝对 定位 的 元 素 指定 偏 移 
量 ， 这 个 元 素 将 显示 在 它 的 自然 位 置 上 ， 但 
不 会 影响 后 续 元 素 在 文档 流 中 的 位 置 。 








还 有 一 种 定位 类 型 称 为 固定 定位 。 
当 访 问 者 滚动 浏览 器 窗口 时 ， 页 面 内 容 通 常 
随 之 上 下 移动 。 如 果 对 元 素 设 置 position: 
fixed;， 它 就 会 固定 在 浏览 器 窗口 中 。 当 访 
问 者 上 下 滚动 浏览 器 窗口 时 ， 该 元 素 不 会 随 
之 移动 ， 页 面 的 其 余部 分 仍 照 种 滚动 。 这 跟 
固定 背景 图 像 的 工作 原理 类 似 (参见 10.10 
节 )。 固 定 定位 在 很 多 移动 浏览 器 中 效果 不 佳 ， 
因此 如 果 你 布 望 自己 的 网 页 能 很 好 地 适应 移 
动 设备 ， 最 好 不 要 使 用 固定 定位 。 


使 用 相对 定位 、 绝 对 定位 或 固定 定位 
时 ， 可 以 使 用 z-index 属性 指定 相互 重 登 的 元 
素 的 过 放 次 序 。 详 细 说 明 参 见 11.15 节 。 


对 元 素 设 置 position: static 将 履 盖 
position: absolute; 的 设置 。static 是 元 素 
定位 的 默认 值 ， 这 也 是 元 素 为 什么 出 现在 常 
规 文档 流 中 的 原因 。 有 关 实 例 参 见 11.15 节 。 


要 隐 定位 不 是 继承 的 。 
11.15 在 栈 中 定位 元 素 


当 你 开始 使 用 相对 定位 、 绝 对 定位 和 回 
定 定位 以 后 ， 很 可 能 发 现 元 素 相 互 重 蔡 的 情 
况 ， 这 时 可 以 选择 哪些 元 素 应 该 出 现在 顶层 
(参见 图 11.15.1、 图 11.15.2 和 图 11.15.3 ) 。 








<div class="box1"><p>Box 1</p><¢/div> 
<div class="box2"><p>Box 2</p></div> 


<div class="box3"><p>Box 3</p></div> 
<div class="box4"><p>Box 4</p></div> 





11.15.1 HTML 中 div 的 次 序 
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border: 1px solid #666; 
height: 125px; 
position: absolute; 
width: 200px; 


} 


.box1 { 
background: pink; 
left: 110px; 
top: 50px; 
z-index: 120; 


bl 


.box2 { 
background: yellow; 
left: 0; 
top: 130px; 
z-index: 530; 


} 


.box3 { 
background: #ccc; 
position: static; 
/* 静态 的 ， 没 有 任何 效果 */ 
z-index: 1000; 


} 


.box4 { 
background: orange; 
left: 285px; 
top: 65px; 
z-index: 3; 





图 11.15.2 ”对 于 定位 元 素 ， z-index 最 高 的 数 显 
示 在 最 上 面 (如 图 11.15.3 所 示 ) ,不 管 该 元 素 
在 HIML 中 出 现 的 次 序 ( 如 图 11.15.1 所 示 )。 

一 条 规则 为 所 有 四 个 div 设置 了 position: 
absolute;， 而 定义 .box3 时 又 覆盖 了 这 一 规则 ， 
让 .box3 回 到 默认 的 static。 因 此 ， EC 的 
z-index 值 最 高 ， 但 这 没有 任何 效果 ， 它 总 是 位 于 
最 底层 





在 栈 中 定位 元 素 
输入 z-index: n， 其 中 的 n 是 表示 元 素 
在 定位 过 的 对 象 堆 中 的 层级 的 数字 。 


z-index 的 值 越 大 ， 元 素 在 堆 中 就 越 
高 (参见 图 11.15.2 和 图 11.15.3)。 
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z-index 





图 11.15.3 定位 的 盒子 按照 z-index 由 高 到 低 的 





次 序 进行 释放 。 第 三 个 盒子 位 于 最 底层 ， 因 为 它 处 
于 和 常规 的 文档 流 
z-index 属性 仅 对 定位 过 的 元 素 ( 即 


设 为 绝对 定位 、 相 对 定位 或 固定 定位 的 元 
素 ) 有效。 图 11.15.1 仅 包 含 绝 对 定位 的 元 
素 ， 但 实际 上 可 以 对 绝对 定位 、 相 对 定位 和 
固定 定位 的 元 素 混 合 使 用 z-index，z-index 
会 将 它们 作为 整体 进行 安排 ， 而 不 是 分 别 
安排 。 


z-index 属性 不 是 继承 的 。 


11.16 “处 理 洪 出 


元 素 并 不 总 是 包含 在 它们 目 己 的 盒子 里 。 

可 能 是 因为 盒子 不 够 大 ， 例 如， 图 像 比 它 
as 会 淤 出 ; 也 可 能 是 因为 使 用 负 
的 外 边 距 或 绝对 定位 让 内 容 处 于 盒子 的 外 面 ; 
还 有 可 能 你 对 元 素 设 置 了 显 式 高 度 ， 它 的 内 
容 太 高 而 无 法 装 人 盒子 内 部 。 无 论 是 哪 种 情 
况 ， 都 可 以 使 用 overflow 属性 控制 元 素 在 盒 
子 外 面 的 部 分 ， 参 见 图 11.16.1 和 图 11.16.2。 
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div { 
background: #e0f7ac; 
border: 1px solid #666; 
height: 88px; 
width: 300px; 


} 


.example-hidden { /* div 2 */ 
overflow: hidden; 


} 


.example-scroll { /* div 3 */ 
overflow: scroll; 


} 


.example-auto { /* div 4 */ 
overflow: auto; 





} 





图 11.16.1 这 里 对 div 设置 高度 ， 不 过 通常 最 
好 不 要 对 元 素 设 置 高 度 。 这 里 为 div 添加 了 背景 
和 边框 ， 很 容易 看 出 不 设置 高 度 的 原因 。 三 个 类 演 
示 了 控制 内 容 游 出 的 三 种 方式 











Default (overflow: visible;) 
Pgs 上 


backpack and a map In hand. 


overflow: hidden; 








11.16.2 每 个 带 边 框 的 绿色 区 域 都 是 一 个 包含 
两 个 段落 的 div。 浏览 胡 会 照顾 对 元 厅 指 定 的 高 度 。 
如 果 内 容 太 高 ， 就 会 穿 过 div， 透 到 外 面 来 ( 就 像 
第 一 个 div 那样 ) ， 除 非 使 用 其 他 overflow 设置 ， 
履 盖 默认 的 样式 








决定 浏览 器 如 何 处 理 洪 出 的 步骤 

( 输入 overflow:。 

(2) 输入 visible， 让 元 素 盒子 中 的 所 有 
内 容 可 见 ， 这 是 默认 项 ; 

或 者 输入 hidden， 隐 藏 元 素 盒 
了 的 内 容 ; 

或 者 输入 scrol1， 无 论 元 素 是 否 需 要 ， 
都 在 元 素 上 添加 滚动 条 ; 

或 者 输入 auto， 让 滚动 条 仅 在 访问 者 访 
问 淤 出 内 容 时 出 现 。 


如 果 图 11.16.1 中 的 代码 使 用 min- 
height: 88px; 代替 height 88px; ， 图 11.16.2 
中 的 div 就 会 随 着 内 容 的 增加 而 变 大 。 如 果 
内 容 的 高 度 比 88 像素 矮 ，div 仍 为 88 像素 高 ， 
为 min-height 设置 的 是 最 小 高 度 。 


容纳 不 








overflow 属性 还 可 以 很 方便 地 清除 
float， 参 见 11.12 节 的 补充 材料 。 


11.17 垂直 对 章 元 素 

可 以 使 用 除 默 认 对 齐 方式 以 外 的 多 种 方 
式 对 齐 元 对， 让 它们 在 页 面 上 显得 较为 整齐 
(如 图 11.17.1 ~ 图 11.17.4 所 示 ) 。 


overflow 属性 不 是 继承 的 。 


<form action= Tesults.php”method= get 
> role="search"> 
<label for="search">Search</1abel> 
<input type="search" id="search" 


— name="search” /> 
<input type="image" src="img/btn-go.png" 
— alt="Submit search” /> 

</form> 





图 11.17.1 这 是 一 个 简单 的 表单 ， 只 有 一 个 文本 
标签 、 一 个 文本 输入 框 和 一 个 图 像 提 交 按 钮 。 关 于 
表单 的 更 多 信息 ， 人 参见 第 16 章 
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SEARCH | trampoline sales| 





图 11.17.2 ”默认 情况 下 ， 行 内 内 容 在 竖 直方 向 
上 与 文本 的 基线 对 齐 。 这 里 在 表单 输入 框 里 填 和 人 
了 一 些 文本 ， 用 以 演示 这 一 情况 标签 文本 
(SEARCH ) 、 输 入 框 中 的 文字 与 图 像 的 底 端 都 与 
基线 对 齐 








input[type="image"] { 
vertical-align: bottom; 


} 


11.17.3 每 一 行内 容 都 有 一 个 看 不 见 的 框 〈 线 
框 ) ， 它 代表 了 行 的 高 度 。 在 这 个 例子 中 ， 文 本 输 
和 人 字段 就 能 指示 框 的 下 边缘 ， 因 为 它 是 这 一 行 最 低 
的 部 分 ( 如 图 11.17.2 所 示 ) ， 图 像 会 对 齐 线 框 的 
底部 (如 图 11.17.4 所 示 ) 








全 9 
Aligning Elements Vertically 


Aligning Elements Vertically 


SEARCH | trampoline sales| 


图 11.17.4 搞定 ! 


使 元 素 垂 直 对 齐 的 步骤 

(1) 输 入 vertical-align:。 

(2) 输入 baseline， 使 元 素 的 基准 线 对 齐 
父 元 系 的 基准 线 ; 

或 者 输入 middle， 使 元 素 位 于 父 元 素 
hs 

或 者 输入 sub, 使 元 素 成 为 父 元素 的 下 标 ; 

或 者 输入 super， 使 元 素 成 为 父 元 系 的 
上 标 ; 

或 者 输入 text-top， 使 元 素 的 顶部 对 齐 
父 元 系 的 顶部 ; 
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或 者 输入 text-bottom， 使 元 素 的 底部 对 
齐 父 元 素 的 底部 ; 

或 者 输入 top， 使 元 系 的 顶部 对 齐 当 前 行 
里 最 高 元 系 的 顶部 ; 

或 者 输入 bottom， 使 元 系 的 底部 对 齐 当 
前 行 里 最 低 元 素 的 底部 ; 

或 者 输入 元 素 行 高 的 百分比 ， 可 以 是 正 
数 ， 也 可 以 是 负数 ; 

或 者 输入 某 个 值 ( 正 负 均 可 ， 单 位 为 像 
系 或 em ) 分 别 按照 特定 的 值 癌 上 或 者 癌 下 移 
动 元 条 8 




















更 多 关于 vertical-align 的 说 明 

可 以 使 用 vertical-align 设置 表格 单 
元 格 中 内 容 的 对 齐 方式 。 通 常 ， 默 认 的 样 
式 是 中 间 对 齐 ， 而 不 像 表 格 以 外 的 内 容 那 
样 与 基线 对 齐 。 我 们 将 在 第 18 章 讲解 表格 。 
除了 表格 以 外 ，vertical-align 属性 仅 适 
用 于 行内 元 素 ， 不 能 应 用 于 块 级 元 素 。 更 
多 信息 参见 Chris Covyier 的 解释 ( http://css- 
tricks.com/what-is-vertical-align/ ) 。 


11.18 修改 鼠标 指针 


一 般 情 况 下 ， 浏 响 右 负 页 控制 鼠标 指针 
的 形状 。 大 多 数 时 候 使 用 般 头 形状 ， 指 问 链 
接 时 使 用 手指 形状 (参见 图 11.18.1 ) ， 等 等 。 
使 用 CSS 可 以 修改 指针 的 形状 (如 图 11.18.2 
和 图 11.18.3 所 示 ) 。 





ABOUT CONTACT 


HOME 


指向 Home 链接 时 ， 指 针 变 成 手指 形 





11.18.1 
状 ， 同 时 链接 高 亮 显 示 。 对 于 其 他 链接 也 是 这 样 
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.nav-main .current-page, 
.nav-main .current-page:hover { 


color: #747474; 
cursor: default; 








图 11.18.2” 当 访问 者 位 于 主页 时 ,我 为 HOME 
链接 添加 了 class="current-page"。 这 样 就 修改 
了 链接 文本 的 颜色 、 鼠 标 停 留 状 态 的 颜色 和 指针 
形状 ， 让 它 看 起 来 不 像 是 链接 ( 另外 ， 在 这 个 例 
子 中 ， 也 可 以 在 导航 中 去 掉 HOME 链接 周围 的 
a 元 又 ) 








ABOUT CONTACT 


HOME 





11.18.3 尽管 它 仍然 是 真正 的 链接 ， 但 它 看 起 
来 已 不 像 链接 ,访问 者 正 位 于 这 个 链接 指 癌 的 页 面 ， 
此 这 样 做 是 有 意义 的 





修改 指针 形状 的 步 又 

(1) 输入 cursor:。 

(2) 输入 pointer 表示 停留 在 链接 上 时 通常 
显示 的 指针 形状 (也 ) 或 default 表示 盘 头 (NS ) ， 
或 者 输入 crosshair (十 ) 、move (中 )、wait ( 员 )、 
help (NR? ) 、text ( 工 ) 或 progress ( RR); 

或 者 输入 auto 显示 特定 情形 下 通常 使 用 
的 指针 形状 ; 

或 者 输入 x-resize 显示 双 回 箭头 ， 这 里 
的 X 是 其 中 一 个 盘 头 需要 指 同 的 方向 ， 可 以 
是 n( 北 ) 、nw( 西 北 ) 、e( 东 ) ， 等 等 。 
例如 ，e-resize 指针 显示 成 h。 


不 同 浏览 器 、 不 同系 统 的 指针 形状 可 
能 有 细微 的 差异 。 
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构建 啊 应 陈 网 站 


本 章 内 容 

口 啊 应 式 Web 设计 : 概述 
D 创建 可 伸缩 图 像 

口 创建 弹性 布局 网 格 

口 理解 和 实现 媒体 查询 
口 汇总 

口 兼容 旧版 正 








最 后 一 分 钟 决定 要 不 要 去 看 电影 ;就 安 
道 尔 的 冒 方 语言 跟 人 打赌 ， 查找 已 经 迟到 15 
分 钟 的 会 议 所 在 公司 的 电话 号 码 ; 查看 去 这 
家 公司 的 地 图 ( 因为 迟到 的 原因 是 找 不 到 这 
家 











我 们 想 要 及 时 地 获取 信息 ， 而 随 看 各 种 
形状 和 尺寸 的 移动 设备 的 剧 增 , 万 维 网 可 以 
出 现在 你 的 口袋 里 、 钱 包 里 、 育 包 里 ， 就 像 
它 在 书 果 、 稳 果 和 四 室 一 样 方便 。 

现在 ， 网 站 的 建设 者 需要 让 访问 者 能 够 
通过 移动 电话 、 智 能 手机 、 平 板 电脑 、 笔 记 
本 电脑 、 人 台式 机 、 游 戏 机 、 电 视 机 以 及 未 来 
任何 可 以 上 网 的 设备 获取 信息 。 啊 应 式 Web 
设计 就 是 为 此 诞生 的 。 











在 本 章 中 ， 你 将 了 解 到 如 何 构建 在 各 种 
设备 上 都 能 正常 工作 的 网 站 ， 它 能 根据 设备 
的 功能 和 特征 对 布局 进行 调整 。 


12.1 ”响应 式 Web 设计 : 概述 


以 前 ， 为 了 满足 移动 用 户 的 需求 ， 需 要 
额外 建立 一 个 专门 为 移动 设备 设计 的 网 站 。 
不 久之 前 这 种 做 法 还 比较 流行 ,但 是 目前 已 
经 越 来 越 少 见 了 。 不 过 ,现在 也 还 有 一 些 公 
司 在 这 样 做 。 有 的 还 为 平板 电脑 建立 了 第 三 
个 网 站 。 

不 存在 可 以 适应 所 有 情形 的 某 种 正确 
方法 。 每 周 都 有 新 的 设备 投放 到 市 场 上 ， 而 
且 组 庸 置 疑 的 是 ， 各 家 公司 都 在 设计 新 的 
设备 类 型 。 那 么 ， 构 建 和 维护 多 个 网 站 现实 
吗 ? 甚至 说 ， 有 必要 吗 ? 我 们 无 法 预知 未 来 
的 情形 。 

征 好 ， 我 们 有 办 法 构建 一 个 既 可 以 运行 
在 现在 的 设备 ， 也 可 以 运行 在 未 来 设备 上 的 
网 站 。 更 棒 的 是 ， 可 以 让 它 在 较 小 的 屏幕 、 
较 大 的 屏幕 以 及 介 于 两 者 之 间 的 屏幕 上 显示 
不 同 的 效果 ( 如 图 12.1.1 ~ 图 12.1.3 所 示 ) 。 
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12.1.1 不 管 你 信和 不信 ， 这 里 以 及 图 12.1.2 和 
图 12.1.3 显示 的 Food Sense 主页 ( www.foodsense. 
is ) 都 来 目 同 一 个 网 站 ， 而 不 是 各 目 具 有 单独 URL 
的 不 同 网 站 。 这 个 网 站 采用 了 啊 应 式 Web 设计 方 
法 ， 因 此 它 的 布局 可 以 根据 不 同 的 查看 环境 进行 改 
变 。iPhone ( 如 本 图 所 示 ) 及 其 他 屏幕 大 小 相似 的 
设备 会 根据 特定 的 CSS 规则 显示 布局 。 对 于 更 大 
的 浏览 器 窗口 (参见 图 12.1.2 和 图 12.1.3 ) ， 则 有 
为 外 一 些 CSS 规则 控制 相应 的 布局 






































响应 式 页 面 的 组 成 
Ethan Marcotte 为 我 们 提供 了 如 何 实 现 上 
述 效 果 的 蓝图 ， 并 将 相应 的 方法 命名 为 啊 应 
式 Web 设计 (responsive Web design ) 。 关 于 
啊 应 式 设计 的 历史 参见 11.1 市 。 他 的 方法 植 
根 于 以 下 三 点 。 
口 灵活 的 图 像 和 媒体 。 图 像 和 媒体 资源 
的 尺寸 是 用 百分数 定义 的 ， 从 而 可 以 
根据 环境 进行 缩放 。 
口 灵活 的 、 基 于 网 格 的 布局 ， 也 就 是 流 
式 布 局 。 对 于 啊 应 式 网 站 ， 所 有 的 
width 属性 都 用 百分数 设 定 ， 因 此 所 有 
的 布局 成 分 都 是 相对 的 。 其 他 水 平 属 
性 通 稼 也 会 使 用 相对 单位 (em、 百 分 
数 和 rem 等 ) 。 











口 媒体 查询 。 使 用 这 项 技术 ， 可 以 根据 





媒体 特征 ( 如 浏览 器 可 视 页 面 区 域 的 
宽度 ) 对 设计 进行 调整 

















Shap fow the Be 





12.1.2 这 是 使 用 iPad 及 其 他 屏幕 大 小 相似 的 
设备 查看 Food Sense 主页 的 样子 。 由 于 浏览 希 有 
更 多 空间 显示 内 容 ， 因 此 这 套 样 式 的 CSS 对 标识 
和 导航 都 进行 了 调整 


Shop for the Best 


* x J 
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12.1.3 这 是 Food Sense 主页 显示 在 桌面 浏览 
需 上 的 样子 ， 也 是 最 贤 的 显示 效果 。 该 站 还 有 另外 
两 个 布局 没有 展示 出 来 。 你 可 以 在 计算 机 上 访问 
www.foodsense.is， 再 拖 动 浏览 硕 的 一 角 让 浏览 硕 
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我 们 将 在 接 下 来 的 几 章 逐一 介绍 这 些 主 
题 。 随 后 ， 你 将 一 步 步 学 习 如 何 构建 第 11 章 
示例 的 啊 应 式 版 本 。 


John Allsopp 的 文章 “Web 设计 之 道 ” 

( “A Dao of Web Design” , http://alistapart. 
com/article/dao ) 写 于 2000 年 ， 该 文 讨论 了 设 
计 和 构建 灵活 的 网 站 的 方法 。 这 篇 文章 是 响 
应 式 Web 设计 的 先驱 ，Marcotte 以 及 很 多 其 
他 的 作者 都 引用 过 这 篇 文章 ， 且 认为 它 影 响 
巨大 。 这 篇 文章 很 值得 一 读 。 





Jeremy Keith 在 题 为 “One Web” 的 
演讲 中 归纳 了 “一 个 网 站 适应 所 有 设备 ”的 
方法 (www.vimeo.com/27484362/ ) 。 讲 稿 全 
文 参见 www.adactio.com/articles/4938/。 


12.2 创建 可 伸缩 图 像 


正如 你 在 第 5 章 学 到 的 ， 默 认 情 况 下 ， 
图 像 显 示 的 尺寸 是 HTML 中 指定 的 width 和 
height 属性 值 ( 参见 图 12.2.1 ) 。 如 果 不 指 定 
这 些 属性 值 ， 图 像 就 会 自动 按照 其 原始 尺寸 
显示 。 此 外 ， 你 还 可 以 通过 CSS 以 像素 为 单 
位 设置 width 和 height。 

显然 ， 当 屏幕 宽度 有 限 的 时 候 











， 按 原始 


尺寸 显示 图 像 就 不 一 定 合 适 了 ( 如 图 12.2.2 
所 示 ) 。 使 用 可 伸缩 图 像 撤 术 ( 如 图 12.2.3 


和 图 12.2.4 所 示 ) ， 就 可 以 让 图 像 在 可 用 空 
间 内 缩放 ， 但 不 会 超过 其 本 来 的 客 度 〈 如 
图 12.2.5 和 图 12.2.6 所 示 ) 。 可 用 空间 是 由 
包含 图 像 的 元 到 决定 的 (参见 最 后 一 条 提示 )。 
在 图 12.2.5 中 ， 可 用 空间 是 由 body 元 到 决定 
的 ， 在 图 12.2.6 中 则 是 main 元 素 。 
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<meta name="viewport" 
» content="width=device-width, 
» jnitial-scale=1" /> 
</head> 
<body> 
<img src="img/gettyvilla.jpg”" width="600" 


》 height="365" alt="" 
; /> 


class="post-photo-full" 


<img src="img/victoria.jpg” width="370" 
height="220" alt="" class="post-photo" /> 
</body> 

</html> 


图 12.2.1 一 些 典 型 的 指定 了 width 和 height 的 
img 标签 (参见 图 12.2.2) 。 这 些 代 码 出 现在 第 11 
划 的 代码 中 ( 注意 ， 这 里 省 略 了 alt 中 的 文本 ， 是 
为 了 让 代码 更 简短 ) 





@ 9 A Images with Fixed Dimensions ww 





1 Images with Fixed Dimensions Ee 








图 12.2.2 ”使 用 固定 的 width 和 height 值 时 ， 即 
便 可 视 区 域 变 小 ， 图 像 也 依然 显示 其 原始 尺寸 。 果 
面 浏览 妖 会 显示 深 动 条 ( 左 ) ,而 在 手机 上 ( 右 ) ， 
图 像 占 据 了 整个 屏幕 
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<img src="img/gettyvilla.jpg” alt="" 
» Class="post-photo-full" /> 


<img SITC= img/Victoria.jpg alt="" 
> class="post-photo”" /> 





12.2.3 只 有 HTML 中 不 包含 width 和 height 
属性 ， 图 像 才 有 可 能 变 成 可 伸缩 的 图 像 。 你 还 可 以 
为 网 像 水 加 用 于 添加 样式 的 类 


.post-photo, 
.post-photo-full { 
max-width: 100%; 





12.2.4 让 图 像 变 成 可 伸缩 图 像 的 一 小 段 魔法 CSS 








12.2.5 可 伸缩 图 像 可 以 根据 包含 它们 的 元 素 
(在 这 个 例子 中 为 body ) 的 尺 才 按 比例 缩放 。 它 





们 不 会 比 其 本 来 的 宽度 更 宽 ， 就 像 下 面 的 图 像 所 演 
示 的 那样 。 在 这 个 例子 中 ， 上 面 的 图 像 的 最 大 宽度 
为 600 像素 ， 下 面 的 为 370 像素 


制作 可 伸缩 图 像 的 步骤 

(1) 对 任何 想 做 成 可 伸缩 图 像 的 图 像 ， 在 
HTML 的 img 标签 中 省 略 width 和 height 属 
性 (如 图 12.2.3 所 示 ) 。 

(2) 在 样式 表 中 ， 为 每 个 想 做 成 可 伸缩 图 
像 的 图 像 应 用 max-width: 100% ( 如 图 12.2.4 
所 示 小 < 


Sunny East Gardenat 
the Getty Villa 














se Er a ed 


图 12.2.6 ”我 们 在 本 章 将 要 创建 的 啊 应 式 页 面 在 
320 像素 宽 的 区 域 ( 左 ) 和 480 像素 宽 的 区 域 ( 右 ) 
中 显示 的 样子 。 图 像 会 缩放 以 适应 容器 ! 

















ER 图 像 缩放 的 可 用 空间 是 由 其 父 元 素 建 
立 的 内 容 区 域 。 如 果 父 元 素 有 水 平方 向 上 的 
内 边 距 ， 可 用 空间 就 会 相应 减 小 。 关 于 内 容 
区 域 的 尺寸 ， 参 见 11.7 节 。 


一 定 要 使 用 max-width: 100% 而 不 是 

width: 100%。 它 们 都 能 让 图 像 在 容器 内 缩放 ， 

不 过 ，width: 100% 会 让 图 像 尽 可 能 地 填充 容 
器 ， 如 果 容 器 的 宽度 比 图 像 宽 ， 图 像 就 会 放大 
j 超 过 其 本 来 尺寸 ， 有 可 能 会 显得 较为 难看 。 


AN 


图 标 字 体 和 SVG 可 以 创建 无 损 缩放 
的 图 形 , 这 两 个 主题 分 别 参 见 13.2 节 和 5.1 节 。 


不 要 忘 了 对 图 像 进 行 优 化 ， 让 文件 尺 
寸 尽 可 能 小 ， 参 见 5.4 节 。 
这 项 技术 对 已 经 为 Retina 显示 屏 扩 


大 到 双 倍 大 小 的 图 像 也 适用 。 当 然 ， 双 倍 分 
评 率 的 图 像 的 文件 大 小 也 会 大 很 多 。 关 于 如 
何 创建 为 Retina 显示 屏 准 备 的 图 像 ， 参 见 
5.8 节 (其 中 还 包含 了 一 条 才 助 减 小 文件 尺寸 
的 提示 ) 。 
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可 以 使 用 background-size 属性 对 背 
景 图 像 进行 缩放 ( 对 IE8 无 效 ) 。 更 多 信息 
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天 和 有 还 可 以 使 用 video，embed，object 
{ max-width: 100%; 让 HTMLS 视频 及 其 
他 媒体 变 成 可 伸缩 的 (同样 也 不 要 在 HTML 


参见 www.css3.info/preview/backsround-size/。 

中 为 它们 指定 width 和 height)。 对 于 视 
频 无 法 按照 预期 进行 缩放 的 情况 ， 参 见 
Jonathan Nicol 的 文 草 (http://f6design.com/ 
Journal/2011/10/18/responsive-elements-that- 


retain-their-aspect-ratio/ ) 。 


响应 陈设 计 与 图 像 乙 谜 

可 伸缩 图 像 很 棒 ， 对 吧 ? “不 过 ， 等 等 ，” 你 可 能 会 说 ，“ 加 载 一 个 比 在 页 面 上 需要 显 
示 的 图 像 更 大 的 图 像 ， 不 是 很 不 好 吗 ? 尤其 是 在 连接 速度 较 慢 的 移动 设备 上 ? ” 

尔 说 得 没 错 ， 这 也 是 人 们 试 着 处 理 响 应 式 Web 设计 时 遇 到 的 最 大 的 问题 。 

理想 情况 下 ,我 们 需要 的 是 在 特定 设备 上 刚好 符合 尺寸 要 求 的 图 像 , 移 动 设备 上 用 小 图 像 ， 
平板 电脑 上 用 大 一 些 的 ， 等 等 。 这 能 让 文件 大 小 变 小 ， 同 时 减 小 设备 用 于 显示 图 像 的 内 存 消 
耗 〈 这 对 手机 来 说 尤其 重要 ) 。 特 别 是 ， 这 样 做 能 加 快 页 面 加 载 速度 。 这 对 那些 需要 为 移动 
数据 计划 付费 的 用 户 来 说 也 相当 友好 ( 移动 数据 计划 限制 了 用 户 每 个 月 可 以 下 载 的 数据 大 小 )。 

此 外 ， 有 时 你 可 能 希望 在 移动 设备 上 显示 不 一 样 的 图 像 ， 而 不 仅仅 是 缩小 的 图 像 。 一 个 
常见 的 例子 是 人 的 照片 。 小 的 屏幕 只 显示 人 脸 的 部 分 ， 而 大 的 屏幕 则 显示 全 身 照 。 

很 多 人 和 致力 于 解决 这 一 问题 ， 但 到 本 书写 作 之 际 ， 还 没有 一 种 简单 的 解决 办 法 。 

有 两 个 建议 为 HIML 增加 功能 的 提 人 生 。 一 个 建议 是 为 img 增加 一 个 名 为 srcset 的 属 
性 ， 另 一 个 建议 是 增加 一 个 新 的 名 为 picture 的 元 素 ( 参见 http://www.w3.org/community/ 
respimg/ ) 。 它 们 解决 的 是 相似 的 问题 ， 但 并 非 同 一 个 问题 。 因 此 这 两 个 提议 有 同时 变 为 现实 
的 可 能 。 雍 请 期 待 ! 

同时 ， 在 页 面 中 引入 图 像 的 时 候 也 要 聪明 一 些 。 我 们 的 示例 页 面 中 最 大 的 图 像 为 600 像 
0 
访问 者 有 可 能 察觉 到 需要 较 长 时 间 才 能 加 载 。 立 好 页 面 上 只 需要 显示 这 一 个 图 像 。 至 于 为 
Retina 显示 屏 准 备 图 像 ， 参 见 倒数 第 三 条 提示 。 
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拥有 是 宽容 天 的 网 页 显得 有 些 死 板 。 前 。 图 12.3.3 ) 。 如果 桌 面 浏览 器 的 宽度 小 于 页 面 
冤 度 ,就 会 出 现 横 癌 深 动 条 ( 如 图 12.3.4 所 示 )。 


一 草创 建 的 例子 就 是 这 样 ( 参见 图 12.3.1 ~ 
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<body> 
<div class="page"> 
<header class="masthead" role="banner"> 


</header> 


«div class="container"> 
<main role="main"> 
</main> 
<«div class="sidebar"> 
</div> 

</div> 

<footer role="contentinfo" 

‘class="footer"> 
<«/footer> 
</div> 


</body> 
</html> 








图 12.3.1 在 第 11 草创 建 的 页 面 中 ， 所 有 的 内 容 
都 处 于 一 个 page 类 的 div 里 。 其 中 的 基本 组 成 包 
括 报 头 ( 页 眉 ) 、 包 含 main 和 附注 栏 区 域 的 div( 带 
有 container 类 ) ， 以 及 页 面 的 页 脚 











.page { 
width: 960px; 
} 


main { 
width: 600px; 
} 


.Sidebar { 
width: 300px; 


} 


12.3.2 这些 是 为 第 11 章 创 建 的 示例 页 面 ( 参 
见 图 12.3.1 ) 设置 的 固定 宽度 。 我 们 没有 为 页 丑 、 
页 脚 以 及 包含 main 和 附注 栏 的 container div 设置 
宽度 ， 而 是 让 它们 使 用 浏览 紫 的 默认 值 ， 即 width: 
auto; ， 因 此 它们 会 跟 其 父 元 系 一 样 完 。 它 们 的 父 
元 素 是 page div (参见 图 12.3.1 ) ， 因 此 它们 也 是 
960 像素 宽 ( 如 图 12.3.3 所 示 ) 











page masthead 


main conient width 600px) 


Page footer 








12.3.3 ”最 起 码 ， 页 面 要 包含 四 个 主要 内 容 区 
域 。.page div 和 .container div 没有 显示 在 这 里 ， 
是 因为 它们 本 身 并 不 包含 任何 内 容 。.container 
div、 报 头 和 页 脚 没 有 指定 宽度 (参见 图 12.3.2 ) ， 
它们 的 宽度 目 动 与 .page div 相 同 。( 注意 : 
图 12.3.2 和 图 12.3.6 中 的 CSS 不 会 让 main 和 附注 
栏 左 右 并 排 显示 。 要 知道 如 何 实现 这 种 效果 ， 人 参见 
I 
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图 12.3.4 ”即便 让 浏览 器 窗 口 变 罕 ， 宽 度 仍然 保持 
不 变 


移动 浏览 需 会 显示 完整 的 宽度 ， 但 页 面 
会 显得 特别 小 ， 这 并 不 太 友 好 ( 如 图 12.3.5 
所 示 ) 。 

这 对 响应 式 页 面 来 说 并 不 合适 。 我 们 希 
望 页 面 能 进行 缩放 ， 并 正好 适应 浏览 需 视 觉 
区 域 大 小 , 束 像 可 伸缩 图 像 一 样 。 流 式 布局 ( 又 
称 弹 性 布局 ) 便 可 以 做 到 这 一 点 。 

一 旦 掌握 了 弹性 布局 方法 ， 创建 弹性 布 
局 就 很 容易 了 。 创 建 弹性 布局 需要 使 用 百 分 
数 宽 度 ， 并 将 它们 应 用 于 页 面 里 的 主要 区 域 
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(参见 图 12.3.1 和 图 12.3.6 ) 。 这 需要 一 些 数 

学 知识 ， 不 过 不 必 担 心 ， 它 不 会 比 你 小 学 数 
学 学 到 的 东西 复杂 。 如 果 你 怀疑 这 一 点 ， 可 
以 在 手头 准备 一 个 计算 妖 ! 




















Er 


12.3.5 像 iPhone 这 样 的 手机 会 缩小 页 面 (如 

















末 你 希望 的 话 ) ， 但 访问 者 需要 放大 才能 阅读 里 面 
的 内 容 


.page { 
max-width: 960px; 
} 


main { 
/* 要 求 宽 度 / 包 含 块 宽度 使 用 600px/960px */ 


width: 62.5%; 
} 


.Sidebar { 
width: 31.25%; /* 300px/960px */ 
} 








12.3.6 这 是 与 图 12.3.2 中 定 宽 布局 对 等 的 流 
式 布局 样式 。 为 .page div 设置 的 死板 的 width: 
960px; 被 蔡 换 为 max-width: 960px;。 这 让 该 元 素 
可 以 进行 缩放 ， 但 不 会 超过 960 像素 。 我 用 先前 提 
供 的 公式 来 确定 main 和 .sidebar 的 百分数 宽度 


那么 我 们 如 何 知 道 需 要 使 用 多 大 的 百 分 
数 呢 ? 实际 上 ， 元 素 的 百分数 宽度 基于 其 父 
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元 素 ( 即 包含 该 元 素 的 容 融 ) 提 供 的 可 用 空间 。 
这 些 说 法 似乎 有 些 熟 悉 ? 这 是 因为 创建 弹性 
布局 的 原理 与 创建 可 伸缩 图 像 的 原理 是 相同 
的 。 可 以 使 用 下 面 的 公式 计算 需要 使 用 的 百 
分 数 : 

要 指定 的 宽度 〈 以 像素 为 单位 ) /容器 宽度 〈 以 像 

素 为 单位 ) = 值 

这 与 Ethan Marcotte 的 公式 〈 目标 /环境 
= 值 ) 是 一 致 的 ， 只 是 解释 得 更 为 明了 。 如 
末 创 建 了 定 宽 布 局 ， 那 么 就 将 它们 市 到 公式 
里 自 一 下 。 


1. 一 个 真实 的 例子 

让 我 们 考虑 一 个 简单 的 页 面 布 局 (将 在 
本 章 后 面 构建 该 页 面 ) 。 我 将 演示 如 何 算出 
main 的 width 为 62.5% (参见 图 12.3.6) 。 使 
用 公式 ， 不 难得 出 : 


要 指定 的 宽度 (600px ) /容器 宽度 (960px ) = 值 
( .625) 


然后 将 值 转化 为 百分数 (将 小 数 点 回 右 
移动 两 位 ) ， 得 到 62.5%。 将 这 个 数值 作为 
width 的 值 (参见 图 12.3.6 ) 。 完 成 ! 

如 果 你 对 这 一 数字 还 是 感到 困惑 ， 我 会 详 
细 解 释 。 布 局 最 宽 为 960 像 系 ,这 是 由 .page 
的 样式 规则 确定 的 (参见 图 12.3.6 ) 。 如 果 不 
对 main 的 父 元 素 .container div 指定 宽度 ( 参 
见 图 12.3.1) ， 其 宽度 就 自动 为 960 像素 。 

( .container div 的 父 元 系 是 .page div。 ) 

如 果 我 希望 main 的 宽度 最 多 占据 960 
像 系 中 的 600 像素 。 使 用 先前 给 出 的 公式 ， 
600/960=0.625。 使 用 百分数 ， 则 为 62.5%。 
对 .sidebar 也 可 以 使 用 同样 的 方法 ， 只 不 
过 我 希望 其 宽度 不 超过 300 像素 。 因 此 使 用 
300/960 计算 ,得 0.3125， 即 31.25% ( 参见 
图 12.3.6 ) 。 

结合 使 用 可 伸缩 图 像 和 弹性 布局 ， 便 可 
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以 让 整个 页 面 变 
图 12.3.8 所 示 ) 。 


得 可 以 缩放 (如 图 12.3.7 和 











12.3.7 “无论 页 面 的 视 党 区 域 有 多 宽 ， 两 栏 始终 
保持 各 自 所 占 的 比例 。 如 果 可 视 区 域 宽度 超过 960 
像素 ， 页 面 就 停止 变 宽 ， 如 最 上 面 的 图 所 示 
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ABOUT CONTACT 
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图 12.3.8 ”应 用 到 本 章 后 面 将 要 建立 的 啊 应 式 页 
面 ， 图 12.3.6 中 给 出 的 样式 会 让 布局 可 以 缩放 ， 不 
过 永远 不 会 超过 960 像 取 , 无 论 浏 览 需 窗口 有 多 宽 ， 
如 下 面 的 图 所 示 
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2. 创建 弹性 布局 的 步骤 

对 于 需要 茶 个 宽度 实现 预期 布局 的 元 系 ， 
设置 width: percentage;， 其 中 percentage 
表示 你 硕 望 元 系 在 水 平方 向 上 占据 容 融 空间 
的 比例 ( 参见 图 12.3.6 ) 。 通 党 说 来 ， 不 必 设 
置 width: 100%; ， 因 为 默认 设置 为 display: 
block; 的 元 系 ( 如 p 以 及 其 他 很 多 元 系 ) 或 
手动 设置 为 display: block; 的 元 素 在 默认 情 
况 下 会 占据 整个 可 用 空间 。 














作为 可 选 的 一 步 ， 对 包含 整个 页 面 内 容 
的 元 素 设 置 max-width: value;， 其 中 value 





表示 你 希望 页 面 最 多 可 增长 到 的 最 大 宽度 ( 参 
见 图 12.3.6、 图 12.3.7 和 图 12.3.8 ) 。 
value 以 像素 为 单位 , 不 过 
em 值 或 其 他 单位 的 值 。 


em 内 边 距 ， 
sp 就 会 变 小 。 要 回顾 这 


通常 ， 


寺 也 可 以 使 用 百分数 、 


段 内 容 ， 请 参见 11.7 节 。 
还 可 以 对 元 素 设 置 基于 百分数 的 


margin 和 padding 值 。 在 示例 页 面 中 ， 我 对 

这 些 属性 使 用 的 是 em 值 ， 这 是 一 种 常见 的 做 

法 。 内 边 距 和 外 边 距 的 em 值 是 相对 于 元 素 的 

font-size 的 ， 而 基于 百分数 的 值 则 是 相对 于 
包含 元 素 的 容器 的 。 


对 于 设置 了 body { font-size: 100%; 
} 的 页 面 ， 对 font-size、margin、padding 和 
max-width 使 用 em po 
用 户 更 改 了 浏览 器 默认 字体 大 小 ， 那 么 
也 会 跟着 变 大 或 变 小 。 例 如， 在 Firefox 
可 以 在 Preferences 中 的 Content 标签 页 中 更 
改 默 认 人 补体 大 小 。 不 妨 打 开 www.htmlcessvgs. 
com/8ed/examples/12/finished-page.html 试 试 
这 一 特性 。 
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在 使 用 公式 计算 元 素 的 百分数 宽度 
时 ， 不 要 忘 了 容纳 它 的 容器 来 自 它 最 直接 的 
祖先 ( 即 上 下 文 ) 。 


将 box-sizing 属性 设置 为 border- 
box， 就 可 以 很 方便 地 对 拥有 水 平方 向 内 边 距 
(使 用 em 或 其 他 的 单位 ) 的 元 素 定义 宽度 ， 
而 不 必 进 行 复杂 的 数学 计算 来 找 出 百分数 的 
值 。 这 对 响应 式 页 面 来 说 很 方便 。 更 多 相关 

信息 参见 11.5 节 。 


设置 相对 的 max-width 

包含 整个 页 面 的 .page div (参见 

图 12.3.1 ) 设置 了 以 像素 为 单位 的 max-width 

(960 ) ， 参 见 图 12.3.6。 这 个 值 能 否 使 用 
灵活 的 相对 单位 呢 ? 其 实 ， 设 置 .page { 
max-width: 60em; } 就 可 以 了 。 下 面 是 具 
体 的 解释 : 

em 宽度 是 基于 元 床 守 体 大 小 的 。 例如， 
如 果 其 字体 大 小 等 价 于 14 像素 ， 则 width: 
10em; 会 将 宽度 设置 为 140 像素 。 

.page div 没 有 指定 font-size， 因 此 
它 从 父 元 素 (body 元 素 ) 继承 。 我 们 知道 ， 
body 的 默认 字体 大 小 通常 等 于 16 像素 。 因 
此 ， 如 果 希 望 将 .page 的 最 大 宽度 设 为 960 
像素 ，960/16=60em。 

设置 .page { max-width: 60em; } 与 
使 用 960px 是 相似 的 ， 但 它们 有 一 个 显著 
的 不 同 : 前 者 会 根据 浏览 器 默认 字体 大 小 
进行 缩放 。 第 三 条 提示 里 讲 了 如 何 看 到 这 
I 


12.4 理解 和 实现 媒体 查询 
我 们 在 8.6 节 中 学 习 过 ， 可 以 使 用 两 种 
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方式 针对 特定 的 媒体 类 型 定位 CSS。( 还 有 
第 三 种 方式 ， 即 使 用 @import 规则 ， 我 们 不 
讨论 这 种 方法 ， 因 为 它 会 影响 性 能 。) 回顾 
一 下 ， 第 一 种 方式 是 使 用 link 元 系 的 media 
属性 ， 位 于 head 内 ， 参 见 图 12.4.1。 第 二 种 
方式 是 在 样式 表 中 使 用 @media 规则 ， 参 见 
图 12.4.2。 











<head> 


<link rel="stylesheet" href= 
"your-styles.css" media="screen”" /> 
</head> 








12.4.1 
中 的 样式 


在 屏幕 上 查看 页 面 时 会 应 用 your-styles.css 


/# 屏幕 和 打印 共用 的 样式 */ 


/* 只 用 于 打印 的 样式 */ 
@media print { 


header[role="banner"| nav, 
.ad { 
display: none; 





12.4.2 通过 @media print 规则 可 以 创建 专门 
为 打印 浏览 右 里 的 页 面 定义 的 样式 。 也 可 以 将 它们 
与 为 其 他 媒体 定义 的 样式 放 在 一 起 

媒体 查询 增强 了 媒体 类 型 方法 ， 人 允许 根据 
特定 的 设备 特性 定位 样式 (参见 图 12.4.3 ) 。 
要 调整 网 站 的 呈现 样式 ， 让 其 适应 不 同 的 屏 
幕 太 寸 ， 采 用 媒体 查询 特别 方便 。 下 面 列 出 
了 可 以 包含 在 媒体 查询 里 的 媒体 特性 。 

口 Width ( 守 度 ) 

D height ( 高度) 

口 device-width (设备 宽度 ) 

口 device-height (设备 高 度 ) 

口 orientation ( 方 回 ) 
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口 aspect-ratio ( 高 宽 比 ) 

口 device-aspect-ratio ( 设备 高 宽 比 ) 

口 color ( 颜色 ) 

D color-index ( 颜色 数 ) 

口 monochrome ( 单 色 ) 

口 resolution ( 分辨 率 ) 

D scan( 扫 摘 ) 

D grid ( 栅 格 ) 

还 有 一 些 非 标准 的 媒体 特性 ， 如 

口 -webkit-device-pixel-ratio( WebKit! 


设备 像素 比 ) 
口 -moz-device-pixel-ratio ( Mozilla2 设 
备 像素 比 ) 


除了 orientation 、scan 和 grid 以 外 ， 
上 述 属 性 均 可 添加 min- 和 max- 前 级 。min- 
前 级 定位 的 是 “大 于 等 于 ”对 应 值 的 目标 ， 
而 max- 前 级 定位 的 则 是 “小 于 等 于 ”对 应 值 
的 目标 。 

在 本 划 里 ,我 们 将 看 重 介绍 min-width 和 
max-width， 因 为 它们 是 制作 响应 式 页 面 时 反 
复 用 到 的 两 个 媒体 特性 。 

现代 桌面 浏览 器 和 移动 电话 浏览 器 对 
媒体 查询 的 支持 程度 很 高 。 不 过 ，Internet 
Explorer 8 及 以 下 版 本 并 不 文 持 媒体 查询 ， 相 
关 解 决 方案 请 参见 12.6 市 。 


1. 媒体 查询 语法 和 示例 

Peter Gasston 的 The Book of CSS3 (No 
Starch Press，2011 ) 一 书写 得 很 棒 。 该 书 对 媒 
体 查 询 的 语法 做 了 很 好 的 归纳 。 以 下 是 媒体 
查询 的 基本 霹 法 。 

口 指 回 外 部 样式 表 的 链接 : 

<link rel=' stylesheet ”media= 1ogic 


type and (feature: value)" 
href="your-stylesheet.css" /> 




















口 位 于 样式 表 中 的 媒体 查询 : 


@media logic type and (feature: 
value) { 


/* 目标 CSS 样 式 规 则 写 在 这 里 */ 

上 

我 将 在 随后 解释 有 关 的 语法 ， 不 过 几 个 
简单 的 例子 (参见 图 12.4.3 和 图 12.4.4 ) 有 助 
于 在 上 下 文中 理解 这 些 语句 。 示 例 中 的 查询 
是 相同 的 ， 但 它们 呈现 样式 的 方式 却 是 不 同 
的 。 图 12.2.3 中 的 示例 可 以 翻译 为 “ 仅 当 媒 
体 类 型 为 screen 且 视 觉 区 域 最 小 宽度 为 480 
像 系 时 ， 加 载 并 使 用 styles-480.css 中 的 样式 
规则 ”。 图 12.4.4 中 的 示例 可 以 翻译 为 “ 仅 
当 媒 体 类 型 为 screen 日 视觉 区 域 最 小 宽度 为 
480 像素 时 ， 使 用 下 面 的 样式 规则 ”。 (关于 
视觉 区 域 的 含义 , 参见 本 市 最 后 的 补充 材料 。) 
对 于 啊 应 式 页 面 ， 大 多 数 情 况 下 我 们 需要 将 
媒体 查询 放 到 样式 表 中 。 

















<head> 
<meta charset="utf-8" /> 
<title>Media query in link</title> 
<meta name="viewport" content="width= 
device-width, initial-scale=1.0" /> 
<link rel="stylesheet" href="base.css" 
media="all” /> 


| 

The Jogic is only. 

The type is screen. 

The feature: value is min-width: 480px. 

--> 

<link rel="stylesheet" media="only 
screen and (min-width: 480px)" 

href="styles-480.css” /> 
</head> 


12.4.3 ”base.css 中 的 样式 用 于 所 有 的 输出 设备 。 
styles-480.css 中 的 样式 则 仅 用 于 文 持 媒体 查询 且 视 
党 区 域 宽度 不 低 于 480 像 系 的 浏览 需 





GO WebKit 是 Chrome 、Safari 等 浏览 还 使 用 的 网 页 引擎 和 JavaScript 引 警 开源 程序 。 一 一 译 者 注 


@) Mozilla 是 Firefox 等 浏览 锅 的 基础 程序 。 一 一 译 者 注 
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/* 常规 样式 写 在 这 里 。 
每 个 设备 都 能 获取 它们 ， 
除非 被 媒体 查询 中 的 样式 规则 禾 盖 */ 
body { 
font: 200%/1.3 sans-serif; 


color: green; 


/* 
The Jogic is only. 
The type is screen. 
The feature: value is min-width: 480px. 
人 
@media only screen and (min-width: 
480px) { 
p { 
color: red; 
font-weight: bold; 
} 





12.4.4 这 个 粗略 的 示例 包含 了 默认 的 段落 样 
式 ， 接 着 是 当 媒 体 查 询 结果 为 真 时 对 段落 文本 的 修 
改 。 我 将 这 份 样式 表 保 存 为 basic-media-query.css， 
并 在 如 图 12.4.5 所 示 的 页 面 中 加 载 该 文件 。 结 果 如 
图 12.4.6、 图 12.4.7 和 图 12.4.8 所 示 


我 创建 了 一 个 测试 页 (如 图 12.4.5 所 
示 ) ， 并 指向 包含 图 12.4.4 中 代码 的 样式 表 。 
可 以 查看 该 页 面 在 iPhone (图 12.4.6) 、iPad 
(图 12.4.7) 及 罕 的 果 面 浏览 右 (图 12.4.8 ) 
中 显示 的 样子 。 

回 到 语法 ， 让 我 们 看 看 这 些 代 码 的 组 成 


部 分 。 


D 7o8gic( 逮 辑 ) 部 分 是 可 选 的 ， 其 值 可 
以 是 only 或 not。only 关键 字 可 以 确 
保 旧 的 浏览 器 不 读 取 余下 的 媒体 查询 ， 
同时 一 并 忽略 链接 的 样式 表 。not 关 
键 字 可 以 对 媒体 查询 的 结果 求 反 ， 让 
其 反面 为 真 。 例 如 ， 使 用 media="not 
screen" 会 在 媒体 类 型 为 screen 以 外 
的 任何 类 型 时 加 载 样式 表 。 




















D type ( 类 型 ) 部 分 是 媒体 类 型 ， 如 12 


screen、print 等 。 

口 feature: vayue 对 是 可 选 的 ， 但 一 旦 
包含 它们 ， 它 们 必须 用 括号 包围 旦 前 
面 要 有 and 这 个 学 。feature 是 预定 
义 的 媒体 特性 ， 如 min-width、max- 
width 或 者 resolution。 对 color、 
color-index 和 monochrome 特性 来 说 ， 
Value 是 可 选 的 。 





《!DOCTYPE html> 
<html Jang= en > 
<head> 
<meta charset="utf-8" /> 
<title>Basic media query example</title> 
<meta name="viewport" content="width= 
device-width, initial-scale=1.0" /> 
<link rel="stylesheet" 
href="assets/ 
css/basic-media-query.css" /> 
</head> 
<body> 
<p>Hi, I'm a paragraph. By default, I'm 
green and normal. But get me in a 
viewport that's at least 480px wide, 
and I get red and boldl</p> 
</body> 
</html> 


12.4.5 ”这 个 样式 表 包 含 了 需要 加 载 的 媒体 查 
询 ， 跟 其 他 样式 表 一 样 





Hi, I'maparagraph, 

By default lI'm green 

and normal, But get 

me in a viewport 

that's at least 480pX 

wide, and | get red 
and bold| 


12.4.6 在 iPhone 纵向 
模式 下 ，Mobile Safari 的 
视觉 区 域 为 320 像素 宽 ， 
因此 文本 仍 为 样式 表 中 基 
准 样 式 定义 的 绿色 ( 它 从 
浏览 副 的 默认 样式 继承 了 
font-weight 的 常规 值 ) 。 
不 过 ， 当 页 面 显示 在 iPad 
中 时 Pe 
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Dasec media query apmpPie 


Hi, I'm a paragraph. By default I'm green and 
normal. But get me in a viewport that's at least 


480px wide, and | get red and bold! 


图 12.4.7 ……… 由 于 在 iPad 纵 回 模式 下 浏览 融 的 
视觉 区 域 为 768 像素 宽 ， 而 宽度 大 于 等 于 480 像素 
时 会 触发 媒体 查询 ， 文 本 变 成 以 红色 粗 体 显示 。 在 
iPhone 横向 模式 下 该 效果 也 会 生效 ， 因 为 该 模式 下 
视觉 区 域 的 宽度 刚好 为 480 像素 





Hi, lmaparagraph. By default, 
lI'm green and normal, But get 


me in a viewport that's at least 
480px Wide, and | get red and 
boldl 





图 12.4.8 ”现代 桌面 浏览 如 也 理解 媒体 查询 。 
这 是 Firefox， 通 过 拖 搜 窗口 的 右 下 角 使 视觉 区 
域 的 宽度 小 于 480 像素 ， 因 此 文本 显示 为 绿色 ， 
font-weight 为 浓 规 值 。 如 果 让 窗口 变 大 ， 使 其 宽 
度 至 少 为 480 像素 ， 文 字 将 立即 以 红色 粗 体 显示 ， 
无 须 刷 新 页 面 

可 以 使 用 and 将 多 个 特性 和 值 的 组 合 串 
接 起 来 ， 还 可 以 创建 一 系列 媒体 查询 (使 用 
有 逗号 分 隅 每 个 媒体 查询 ) 。 在 用 逗号 分 隔 的 
媒体 查询 列表 中 ， 如 果 有 一 个 媒体 查询 为 
真 ， 则 整个 媒体 查询 列表 为 真 。 图 12.4.9 和 
图 12.4.10 显示 了 多 种 媒体 查询 。 

















2. 小 结 

通过 媒体 查询 ， 可 以 根据 设备 的 媒体 属 
性 应 用 不 同 的 样式 。 尽 管 媒 体 查询 包含 了 很 
多 功能 ， 但 其 中 min-width 和 max-width 是 创 











建 啊 应 式 网 页 时 用 的 最 多 的 。 





<link rel="stylesheet" media="only 
screen and (min-width: 480px) and 
(max-width: 767px)" 
href="styles.css"” /> 


<link rel="stylesheet" media="only 
screen and (orientation: 


landscape)" href="styles.css" /> 


<link rel="stylesheet" media="only print 


and (color)" href="color-pages.css" /> 


<link rel="stylesheet" media="only print 
and (monochrome)" href="monochrome- 
pages.CSS /> 


<link rel="stylesheet" media="only screen 
and (color), projection and (color)" 
href="styles.css" /> 
</head> 
<body> 





图 12.4.9 当 媒 体 查 询 为 真 时 加 载 外 部 样式 表 的 
示例 
在 媒体 查询 中 使 用 em 


到 目前 为 止 ， 本 书 在 媒体 查询 的 示例 
(参见 图 12.4.3、 图 12.4.4、 图 12.4.9 和 
图 12.4.10 ) 中 均 使 用 像素 作为 min-width 
和 max-width 值 的 单位 ， 这 样 做 有 助 于 帮助 
读者 理解 媒体 查询 的 工作 原理 。 不 过 在 实 
践 中 ， 最 好 使 用 em， 因 为 媒体 的 触发 条 件 
往往 与 访问 者 浏览 器 中 显示 的 字体 大 小 有 
关 。Lyza Gardner 对 使 用 em 的 好 处 作 了 进 
一 步 说 明 ， 参 见 http://blog.cloudfour.com/the- 
ems-have-it-proportional-media-queries-ftw/。 
在 下 一 部 分 构建 响应 式 网 页 的 示例 页 
面 时 ， 媒 体 查询 将 使 用 em 值 。 同 时 ， 注 
释 中 将 说 明 它 们 产生 的 以 像素 为 单位 的 近 
似 值 。 
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任何 位 于 媒体 查询 以 外 的 基准 样式 规 
则 都 会 应 用 于 所 有 的 设备 。 可 以 使 用 媒体 查 
/* 针对 所 有 设备 的 基准 样式 */ 询 窗 盖 这 些 样 式 规 则 。 需 要 说 明 的 是 ， 媒 体 
查询 样式 规则 声明 仅 在 与 常规 样式 冲突 时 进 
行 被 盖 ， 如 图 12.4.3 中 的 color: green;。 如 
ee 果 媒 体 查 询 之 前 的 p 的 样式 规则 包含 font- 
@media only screen and (min-width: style: italic;, 那么 媒体 查询 为 真 时 段落 文 

Re 本 仍 以 斜体 显示 ， 因 为 媒体 查询 内 的 p 的 样 
} 式 规则 并 未 设置 font-style。 





@media only screen and (orientation: 


0 */ 如 果 你 有 Mac， 可 以 使 用 苹果 推出 的 
} 免费 的 1OS Simulator (iOS 模拟 器 ) 测试 示 


例 页 面 在 iPhone 和 iPad 中 的 显示 情况 。 参 见 


@media only print and (color) { 
/* 样式 规则 */ 20.1 Ts 


} 


@media only print and (monochrome) { CSS3 媒体 查询 规范 中 列 出 了 关于 
米 样 文 | * 
人 所 有 媒体 特性 的 描述 (www.w3.org/TR/css3- 


mediaqueries/#medial ) 。 


} 


@media only screen and (color), projection 
and (color) { 
/* 样式 规则 */ 








图 12.4.10 这些 媒 体 查询 与 图 12.4.9 中 的 是 相同 
的 ， 只 是 直接 出 现在 样式 表 中 





理解 视 锅 区 域 及 使 用 视 锡 区域 meta 元 素 

视 党 区 域 (Viewport ) 指 的 是 浏览 器 (包括 果 面 浏览 器 和 移动 浏览 器 ) 显示 页 面 的 区 域 。 
它 不 包 念 浏览 器 地 址 栏 、 按 钮 这 样 的 东西 ， 只 是 浏览 区 域 。 媒 体 查询 的 Width 特性 对 应 的 是 
视觉 区 域 的 宽度 。 不 过 ，device-width 特性 不 是 ， 它 指 的 是 屏幕 的 宽度 。 

在 移动 设备 (如 iPhone ) 上 ,默认 情况 下 这 两 个 值 通常 不 一 样 .Mobile Safari( iPhone 的 浏览 器 ) 
的 视觉 区 域 默 认为 980 像素 宽 ， 但 iPhone 的 屏幕 只 有 320 像 素 宽 (iPhone 的 Retina 显示 屏 的 屏 
幕 分 辨认 有 640 像素 宽 , 但 它们 是 在 相同 的 空间 挤 入 两 倍 的 像素 , 因此 设备 宽度 仍 为 320 像素 ) 。 

此 ，iPhone 会 像 设 为 980 像素 宽 的 桌面 浏览 器 那样 显示 页 面 ， 并 将 页 面 缩小 以 适应 
320 像素 的 屏幕 宽度 (在 纵向 模式 下 ) ， 如 图 12.4.11 所 示 。 结 果 ， 当 你 在 Mobile Safari 中 浏 
览 大 部 分 为 吕 面 浏览 器 建立 的 网 站 时 ,会 显示 将 这 些 网 站 缩小 了 的 样子 。 在 横向 模式 下 也 是 
这 样 处 理 的 ， 只 不 过 宽度 为 480 像素 (iPhone5 是 568 像素 ) 。 如 图 12.4.12 所 示 ， 如 果 不 进 
行 放 大 ， 页 面 通常 是 难以 阅读 的 ( 注意 不 同 设备 的 默认 视觉 区 域 宽度 并 不 相同 ) 。 
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图 12.4.11 我 的 测试 页 面包 含 一 个 320 像素 
x 480 像素 的 绿色 div。Mobile Safari 的 视觉 区 域 
默认 为 980 像素 宽 ， 因 此 iPhone 会 将 该 div 缩 
小 ， 以 在 320 像素 宽 的 屏幕 内 显示 它 。 这 就 是 这 
个 绿色 盒子 大 约 占 据 屏 幕 宽 度 的 三 分 之 一 〈 即 
320/980 ) 的 缘故 
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页 面 的 代码 相 比 ， 除 了 包含 设置 了 width=device- 
width 的 视觉 区 域 meta 元 素 以 外 ， 其 他 内 容 是 完 
全 相同 的 。 如 你 所 见 ， 现 在 的 视觉 区 域 宽 度 与 屏 
幕 宽 度 是 相同 的 








幸好 ， 有 一 种 快速 解决 方案 。 在 页 面 的 head 部 分 添加 视觉 区 域 meta 元 素 即 可 。 


<!IDOCTYPE html> 

<html lang="en"> 

<head> 
<meta charset="utf-8" /> 
<title>Your page title</title> 


<meta name="viewport" content="width=device-width, initial-scale=1" /> 


</head> 
<body> 


这 段 代 码 的 重点 是 width=device-width。 有 了 这 条 语句 ， 视 觉 区 域 的 宽度 会 被 设 成 与 设 
备 宽度 (对 iPhone 来 说 为 320 像素 ) 相同 的 值 ， 因 此 在 纵向 模式 下 该 宽度 的 页 面 内 容 会 填充 
整个 屏幕 ( 如 图 12.4.12 所 示 ) 。 如 果 不 包含 这 一 语句 ， 使 用 媒体 查询 的 min-width 和 max- 


width 特性 将 不 会 得 到 预期 的 结果 。 


代码 中 的 initial-scale=1. 部 分 对 width 和 device-width 值 没 有 影响 ， 但 通常 会 包含 这 
一 语句 。 它 将 页 面 的 默认 缩放 级 别 设 成 了 100%， 换 成 纵向 模式 也 一 样 。( 注意 ，iOS6 之 前 
的 版 本 有 一 个 bug， 它 会 裁 掉 一 部 分 内 容 ， 参 见 http://adactio.com/journal/5802/。 ) 如 果 不 设 
置 initial-scale=1， 在 iPhone 中 ， 手 机 从 纵向 模式 改 为 横向 模式 时 ， 网 页 会 被 放大 ， 从 而 


让 布局 与 纵向 模式 的 一 致 。 
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理解 了 可 伸缩 图 人像、 弹性 布局 和 媒体 查 
询 的 知识 之 后 ， 就 可 以 将 它们 组 合 在 一 起 ， 
创建 啊 应 式 网 页 。 

本 书 不 会 演示 应 用 于 每 个 媒体 查询 块 
内 的 全 部 样式 规则 。 本 市 将 重点 关注 页 面 扩 
张 或 收缩 时 切换 内 容 的 显示 方式 所 需要 考 
虑 的 要 点 。 重 要 的 是 了 解 如 何 建立 啊 应 式 网 
站 ， 以 及 用 于 实现 啊 应 式 网 站 的 媒体 查询 类 
型 。 完 整 的 页 面 和 代码 见 www.htmlcssvgs. 
com/8ed/12。 

需要 说 明 的 是 ， 并 不 需要 先 做 出 一 个 定 
寓 的 设计 ， 再 将 它 转 换 成 啊 应 式 的 页 面 。 人 第 
11 草 演 示 了 如 何 构建 定 宽 页 面 ， 本 章 〈 尤 其 
是 本 市 ) 演示 的 是 如 何 从 雪 开 始 构建 啊 应 式 
的 页 面 ， 就 像 从 未 建立 过 定 宽 的 页 面 似 的 。 


1. 创建 内 容 和 HTML 

一 切 应 该 从 可 靠 的 、 认 真 考 虑 过 的 内 容 
开始 。 如 来 你 试看 用 占 位 符 文 本 ( 如 没有 任 
何 含 义 的 lorem ipsum" ) 设 计 和 构建 你 的 网 站 ， 
当 你 填 人 真正 的 内 容 以 后 ， 你 可 能 会 发 现形 
式 与 内 容 结 合 得 不 好 。 因 此 ， 应 该 尽 可 能 地 
将 内 容 采 集 工 作 提前 ， 从 而 对 设计 和 开发 满 
足 访 问 者 〈 和 你 ) 需求 的 网 站 更 有 信心 。 

示例 页 面 的 底层 HIML 与 第 1] 章 
的 页 面 的 代码 是 相同 的 ， 只 是 我 在 head 
元 率 中 添加 了 xmeta name= "viewport" 
content= "width=device-width， initial- 
scale=1"/>。 关 于 这 行 代 码 的 作用 ， 参 见 上 一 
方 的 补充 材料 “理解 视觉 区 域 及 使 用 视觉 区 
域 meta 元 素 ”。 
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2. 移动 优先 方法 

我 会 避 循 移动 优先 为 页 面 设计 样式 ， 推 
存 你 在 设计 网 页 时 也 遵循 这 一 点 。 下 面 是 具 
体 过 程 。 

(1) 首先 为 所 有 的 设备 提供 基准 样式 ( 如 
图 12.5.1 所 示 ) 。 这 同时 也 是 旧版 麟 览 各 和 
功能 比较 简单 的 设备 显示 的 内 容 。 基 准 样式 
通常 包括 基本 的 文本 样式 (字体 、 颜 色 、 大 
小 ) ， 内 边 距 、 边 杠 、 外 边 距 和 背景 ( 视 情 
况 而 定 ) ， 以 及 设置 可 伸缩 图 像 的 样式 。 通 
第， 在 这 个 阶段 ， 需 要 避免 让 元 系 浮 动 ， 或 
对 容 带 设 定 宽度 ,因为 最 小 的 屏 算 并 不 够 贤 。 
内 容 将 按照 第 规 的 文档 流 由 上 到 下 进行 显示 。 
网 站 的 目标 是 在 单列 显示 样式 中 是 清晰 的 、 
中 看 的 ( 如 图 12.5.2 所 示 ) 。 这 样 ， 网 站 对 
所 有 的 设备 (无 论 新旧 ) 都 具有 可 访问 性 。 
在 不 同 设备 下 ， 外 观 可 能 有 差异 ， 不 过 这 是 
在 预期 之 内 的 ， 完 全 可 以 接受 。 

(2) 从 这 种 样式 开始 ， 使 用 媒体 查询 
逐渐 为 更 大 的 屏幕 (或 其 他 媒体 特性 ， 如 
orientation ) 定义 样式 。 大 多 数 时 候 ，min- 
width 和 max-width 媒体 查询 特性 是 最 主要 的 
二 上 

这 是 渐进 增强 在 实战 中 的 应 用 。 (请 回 
顾 本 书 前 言 中 的 “渐进 增强 : 一 种 最 佳 实践 ” 
部 分 。 ) 处 理 能 力 较 弱 的 (通常 也 是 较 旧 的 ) 
设备 和 浏览 硕 会 根据 它们 能 理解 的 CSS 显示 
网 站 相对 人 简单 的 版 本 。 处 理 能 力 较 蝇 的 设备 
和 浏览 融 则 显示 增强 的 版 本 。 所 有 人 都 能 获 
取 到 网 页 的 内 容 。 





























Q 在 西方 排版 、 设 计 领 域 常 用 一 段 以 “lorem ipsum” 开 头 的 拉丁 文 作 为 占 位 符 ， 以 测试 排版 、 设 计 的 效果 。 这 段 
文本 是 经 过 改造 的 、 没 有 意义 的 拉丁 文 ， 常 用 “lorem ipsum” 指 代 这 段 文本 。 一 一 译 者 注 
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font: 100%/1.2 Georgia, "Times New 
—» Roman", serif; 
margin: 0; 


/* 参见 第 11 章 */ 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 


} 


.page { 
margin: 0 auto; 
max-width: 60em; /* 960px */ 


} 


hi { 
font-family: "Lato", sans-serif; 
font-size: 2.25em; /* 36px/16px */ 
font-weight: 300; 


} 


.about h2, .mod h2 { 
font-size: .875em; /* 15px/16px */ 
} 


.logo, 

.SoCcial-sites, 

.nav-main li { 
text-align: center; 


} 


/* 创建 可 伸缩 图 像 */ 
.post-photo， .post-photo-full, 
.about img, .map { 

max-width: 100%; 
} 





图 12.5.1 应 用 于 所 有 视觉 区 域 (小 屏幕 和 大 屏 
幕 设备 ) 的 基准 样式 示例 。 这 些 样式 规则 与 你 在 本 
章 之 前 看 到 的 其 他 代码 是 类 似 的 ， 只 是 它们 没有 由 
媒体 查询 包围 。 注 意 我 为 整个 页 面 设 定 了 60em 的 
最 大 宽度 (通常 等 价 于 960 像素 ) ， 并 使 用 auto 
外 边 距 让 其 居中 。 我 还 让 所 有 的 元 素 使 用 box- 
sizing: border-box; ,将 大 多 数 图 像 设置 为 可 伸缩 
图 像 
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图 12.5.2” 仪 应 用 了 基础 样式 的 页 面 的 开始 点 。 这 
个 页 面 在 所 有 的 浏览 器 中 都 是 线性 的 ( 图 中 右 侧 的 
部 分 出 现在 左 侧 部 分 的 下 面 。 ) 此 截图 展示 的 是 不 
支持 媒体 查询 的 旧 浏 览 絮 中 页 面 的 显示 效果 。 在 这 
种 状态 下 ， 依 然 保 持 了 很 高 的 可 用 性 。 由 于 没有 设 
定 容器 宽度 ， 因 此 在 桌面 浏览 器 中 查看 页 面 时 ， 内 
容 的 宽度 会 延伸 至 整个 浏览 需 窗 口 的 宽度 
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3. 逐步 完善 布局 
如 果 用 啊 应 式 Web 设计 的 术语 ， 这 一 过 
程 可 以 表述 为 ， 使 用 媒体 查询 为 页 面 中 的 每 
个 断 点 (breakpoint ) 定义 样式 。 断 点 即 内 容 
需 作 适当 调整 的 锅 度 。 在 本 例 中 ， 应 用 基准 
样式 规则 后 , 我 为 下 列 断 点 创建 了 样式 规则 。 
记 住 ， 对 于 每 个 最 小 宽度 (没有 对 应 的 最 大 
宽度 ) ， 样 式 定 位 的 是 所 有 宽度 大 于 该 min- 
width 值 的 设备 ， 包 括 台 式 机 及 更 早 的 设备 。 
口 最 小 宽度 为 20em , 通常 为 320 像 素 ( 如 
图 12.5.3 和 图 12.5.4 所 示 ) 。 定 位 纵 
回 模 式 下 的 iPhone、iPod touch、 各 种 
Android 以 及 其 他 移动 电话 。 








/* 基准 样式 


@media only screen and (min-width: 
20em) { 
.nav-main li { 
border-left: 1px solid #c8c8c8; 
display: inline-block; 
text-align: left; 


} 


.nav-main 1i:first-child { 
border-left: none; 


} 


.nav-main a { 
display: inline-block; 
font-size: 1em; 
padding: .5em .9em .5em 1.15em; 


l 








12.5.3 这 里 针对 视觉 区 域 不 小 于 20em 宽 的 浏 
览 需 修改 了 主导 航 的 样式 。 ( 在 假定 body 元 素 字体 
大 小 为 16 像 素 的 情况 下 , 20em 通常 等 价 于 320 像 素 ， 
因为 20x16 = 320。) 这 样 ， 链 接 会 出 现在 单独 的 
一 行 ， 而 不 是 上 下 堆 徐 ( 如 图 12.5.4 所 示 ) 。 我 没 
有 将 这 些 放 到 基础 样式 表 中 ， 因 为 有 的 手机 屏幕 比 
较 宕 ， 可 能 会 让 链接 显得 很 局 促 ， 或 者 分 两 行 显示 
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D 最 小 宽度 为 30em， 通 常 为 480 像素 

( 如 图 12.5.5 ~ 图 12.5.8 所 示 ) 。 定 

位 大 一 些 的 移动 电话 ， 以 及 横向 模式 

下 的 大 量 320 像素 设备 (iPhone 、iPod 
touch 及 某 些 Android 机 型 ) 。 

口 最 小 宽度 介 于 30em ( 通常 为 480 像素 ) 
和 47.9375em ( 通常 为 767 像素 ) 之 
间 ， 参 见 图 12.5.9 和 图 12.5.10) 。 这 
适用 于 处 于 横向 模式 的 手机 、 一 些 特 
定 尺寸 的 平板 电脑 ( 如 Galaxy Tab 和 
Kindle Fire ) ， 以 及 比 通常 情况 更 罕 的 
拧 面 浏览 右 。 

口 最 小 宽度 为 48em, 通常 为 768 像素 ( 如 
图 12.5.11 ~ 图 12.5.13 所 示 ) 。 这 适 
应 于 和 负 见 宽度 及 更 宽 的 iPad、 其 他 平 
板 电脑 和 人 台式 机 的 浏览 髓 。 


HOQME ABOUT CONTACT 


Sunny East Gardenat 
the Getty Villa 





EA 


12.5.4 根据 图 12.5.3 中 的 媒体 查询 ， 主 导航 显 
示 为 一 行 ， 每 个 链接 之 间 由 灰色 的 竖 线 分 隔 。 这 个 
样式 会 在 iPhone ( 以 及 很 多 其 他 的 手机 ) 中 生效 ， 
为 它们 在 纵向 模式 下 是 320 像素 宽 。 如 果 你 希望 
报头 更 矮 一 些 ， 可 以 让 标识 居 左 ， 社 交 图 标 居 右 。 
不 过 我 将 这 种 样式 用 在 下 一 个 媒体 查询 中 (参见 
图 12.5.5 和 图 12.5.6 ) 
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@media only screen and (min-width: 20em) { 


} 


/* 30em (大 于 等 于 480px ) 


@media only screen and (min-width: 30em) { 
.Masthead { position: relative; } 


.Social-sites { 
position: absolute; 
right: -3px; 
top: 41px; 


.logo { 
margin-bottom: 8px; 
text-align: left; 

} 


.nav-main { 
margin-top: 0; 














12.5.5 ”现在 ,样式 表 中 有 了 定位 视觉 区 域 至 少 
为 30em (通常 为 480 像素 ) 的 设备 的 媒体 查询 。 
这 样 的 设备 包括 屏幕 更 大 的 手机 ， 以 及 横向 模式 下 
的 iPhone ( 参见 图 12.5.6 ) 。 这 些 样式 会 再 次 调整 
报头 。 前 两 个 规则 跟 第 11 章 使 用 的 规则 一 样 ， 效 
果 也 一 样 
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12.5.6 这 是 在 30em 客 的 屏 徐 下 显示 页 面 项 部 
的 样子 ， 报 头 是 完整 的 。 在 更 大 的 视觉 区 域 ， 报 头 
宽度 会 目 动 调 大 


/* 30em (大 于 等 于 480px ) 


@media only screen and (min-width: 30em) { 
os 报头 样式 wvi 


.post-photo { 
float: left; 
margin-bottom: 2px; 
margin-right: 22px; 
max-width: 61.667%; 
} 


.post-footer { 
clear: left; 


} 





12.5.7 ”继续 在 同一 个 媒体 查询 块 内 添加 样式 ， 
让 图 像 向 左 浮动 ， 并 减少 其 max-width， 从 而 让 更 
多 的 文字 可 以 浮动 到 其 右 侧 。11.12 节 人 解释 了 为 什 
么 要 在 博客 摘要 下 面 的 页 脚 上 设置 clear: left; 








Queen Victoria 
人 An hour and a half 
aboard a 
comfortable car 
ferry is all it takes 
to transport you 


from the modern, 


Urban space thal ls Greater Vancouver to colonial 


| PO PE OD OPO OY OY DS PS OS ~ OY 





12.5.8 文本 环绕 在 浮动 图 像 周 围 


你 的 断 点 可 能 跟 此 处 用 的 不 同 。 这 取决 
于 哪些 断 点 适合 你 的 内 容 和 设计 。 为 适应 更 
宽 的 视觉 区 域 ， 一 般 不 会 创建 超过 48em 的 
靳 点 。 你 也 不 一 定 要 严格 按照 设备 视觉 区 域 
的 宽度 创建 断 点 。 如 果 一 个 基于 (min-width: 
36em) 的 断 点 非 稼 适合 你 的 内 容 ， 就 可 以 大 胆 
地 使 用 这 个 断 点 。 
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@media only screen and (min-width: 20em) { 
} 

/* 30em ( 大 于 等 于 480px ) 

@media only screen and (min-width: 30em) { 
} 


/* 30em - 47.9375em 
(在 480px 和 767px 之 间 ) 


@media only screen and (min-width: 30em) 
and (max-width: 47.9375em) { 
.about { /* self-clear float */ 


overflow: hidden; 


' 


.about img { 
float: left; 
margin-right: 15px; 


12.5.9 现在 ， 让 About Me 图 像 向 左 浮动 。 
不 过 ， 这 种 样式 仅 当 视觉 区 域 的 宽度 在 30em ( 如 
图 12.5.10 所 示 ) 和 47.9375em 之 间 时 才 生 效 。 超 
过 这 个 宽度 会 让 布局 变 成 两 列 布局 ，About Me 文 
字 会 再 次 出 现在 图 像 的 下 面 。 这 个 随后 实现 








12.5.10 浮动 的 About Me 图 像 已 显示 为 其 本 
来 的 尺寸 (270 像素 宽 ) ， 它 劳 边 的 空间 太 小 ， 无 
法 很 好 地 容纳 文本 。 这 就 是 之 前 减少 其 max-width 
的 原因 ( 如 图 12.5.7 和 图 12.5.8 所 示 ) 
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/* 基准 样式 


@media only screen and (min-width: 20em) { 
} 

/* 30em (大 于 等 于 480px ) 

@media only screen and (min-width: 30em) { 
} 


/* 30em~ 47.9375em 
(在 480px 和 767px 之 间 ) 


@media only screen and (min-width: 30em) and 
(max-width: 47.9375em) { 


} 
/* 48em (大 于 等 于 768px) 


@media only screen and (min-width: 48em) { 
.container { 
background: url(../img/bg.png) 
repeat-y 65.9375% 0; 
padding-bottom: 1.875em; 
} 


main { 

float: left; 

width: 62.5%; /* 600px/960px */ 
} 


.Sidebar { 

float: right; 

margin-top: 1.875em; 

width: 31.25%; /* 300px/960px */ 
} 


.nav-main { margin-bottom: 0; } 





图 12.5.11 这 是 最 终 的 媒体 查询 ， 定 位 至 少 有 
48em 宽 的 视觉 区 域 。 该 媒体 查询 对 大 多 数 桌 面 浏 
蜂 絮 (参见 图 12.5.13 ) 来 说 都 为 真 ， 除 非 用 户 让 
窗口 变 罕 。 它 同时 也 适用 于 纵 癌 模式 下 的 iPad 及 
其 他 一 些 平板 电脑 ， 如 图 12.5.12 所 示 
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HOME ABOUT CONTACT 


Sunny East Garden at 
the Getty Villa 





图 12.5.12 页面 变 得 完整 了 了。 这 里 显示 的 是 在 
iPad 中 页 面 显示 的 样子 ， 在 果 面 浏览 希 中 (尽管 要 
宽 一 些 ) 也 是 类 似 的 。 由 于 宽度 是 用 百分数 定义 的 ， 
因此 主体 内 容 栏 和 附注 栏 会 自动 伸展 





Sunny East Garden at the 
Getty Villa 





The City Named After Queen 


图 12.5.13 ”在 一 个 至 少 有 960 像素 宽 的 浏览 絮 中 
的 样子 。 看 起 来 很 像 我 们 在 第 11 章 中 创建 的 定 宽 
布局 。 如 果 让 浏览 器 的 宽度 变 窗 ， 布 局 就 会 自动 变 
换 为 移动 设备 上 应 该 显示 的 样子 


4. 构建 响应 式 Web 页 面 

(1) 创建 内 容 和 HIML。 

(2) 在 HIML 页 面 的 head 元 系 中 ， 输 
人 :meta name="viewport" content="width= 
device-width”/> 或 <meta name="viewport" 
content="width= device-width, initial- 
Scale=1 />。 

(3) 创建 适用 于 所 有 设备 的 基准 样式 〈 参 
见 “ 移 动 优先 方法 ”) 。 确 保 页 面 中 的 图 像 
可 伸缩 ， 参 见 12.2 节 。 

(4) 识别 出 适合 你 的 内 容 的 断 点 。 创 建 相 
关 的 媒体 查询 ， 让 布局 适应 从 小 屏幕 到 大 屏 
攻 的 不 同 可 视 区 域 宽 度 。(〈 人 参见 “逐步 完善 
布局 ”) 。 

(5) 如 末 需 要 为 第 (4) 步 中 页 面 的 一 些 内 
容 指 定 宽 度 ， 使 用 百分数 (参见 12.3 市 ) 。 

(6) 选择 你 希望 的 旧版 耻 显示 页 面 的 方 
式 〈 参 见 12.6 节 ) 。 

(7) 开始 测试 (参见 “测试 啊 应 式 网 页 ”) 。 

(8) 根据 需要 ， 修 改 第 (3) ~ (5) 步 中 的 
CSS， 并 进行 测试 ， 和 直到 页 面 在 各 种 设备 下 者 
呈现 出 预期 的 效 末 。 


Eivind Uggedal 的 http://mediaqueri.es 
网 站 汇集 了 大 量 现实 的 响应 式 网 站 ( 数量 还 
在 增加 ) ， 值 得 借鉴 。 











Screen Sizes 网 站 ( http://screensiz.es ) 
提供 了 流行 设备 和 显示 屏 的 分 辨 率 和 设备 宽 
度 信 息 。 使 用 媒体 查询 的 时 候 ， 这 些 信 息 可 
能 很 有 用 。 


Maximiliano Firtman 维护 了 一 个 现代 
移动 设备 对 HTML5 和 CSS3 支持 情况 的 表格 ， 
见 http://mobilehtml5.org。 ( 其 中 大 量 信 息 属 
于 HTMLS 高 级 特性 ， 本 书 并 未 涉及 。 ) 
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你 可 能 希望 在 发 布 响应 式 页 面 之 前 先 在 移动 设备 和 桌面 浏览 器 上 对 其 测试 一 遍 。 
构建 响应 式 页 面 的 时 候 ， 你 可 以 放大 或 缩小 采 面 浏览 器 的 窗口 ， 模 拟 不 同 手机 和 平板 电 


脑 的 视 沉 区域 尺 寸 。 然 后 再 对 样式 进行 相应 的 调整 。 


这 当 外 下， 种 不 多 相册 的 小 流量 尼 区 


实 有 助 于 建立 有 效 的 样式 ， 从 而 减少 在 真实 设备 上 优化 网 站 的 时 间 。Malte Wasserman 提供 的 
Viewport Resizer ( http://lab.maltewassermann.com/viewport-resizer/ ) 对 这 一 工作 很 有 帮助 。 

不 过 不 要 就 此 打住 。 对 你 的 浏览 器 多 进行 几 次 放大 或 缩小 ， 测 试 布局 在 桌面 浏览 器 各 种 
宽度 下 如 何 调 整 显示 。 你 可 能 会 找到 其 他 需要 引入 额外 媒体 查询 的 断 点 。 


20.2 节 总 结 了 对 移动 和 于 面 测试 的 方法 。 


对 Retina 及 类 似 显 示 屏 使 用 媒体 查询 


有 时 你 可 能 希望 为 高 像素 密度 设备 设 定 样式 【参见 5.8 节 ) 。 一 种 常见 的 用 例 是 为 这 样 
) 


的 显示 屏 准 备 双 倍 尺寸 (2X ) 的 sprite， 从 而 让 图 像 显 得 更 锋利 。 


(参见 14.10 节 。 


假设 你 的 sprite 的 原始 尺寸 是 200 像素 x 150 像素 ， 其 中 每 个 图 像 都 用 1 像素 分 隔 。 创 
0 和 00 
sprite 中 的 每 个 图 像 都 是 原始 尺寸 的 2 倍 。 针 对 高 像素 密度 设备 ， 可 以 使 用 下 面 的 媒体 查询 : 


@media (-o-min-device-pixel-ratio: 5/4)， 


(-webkit-min-device-pixel-ratio:1.25), 
(min-resolution: 120dpi) { 

.your-class { 
background-image:url(sprite-2x.png); 
background-size: 200px 150px; 

} 

} 


注意 background-size 设 置 成 了 原始 尺寸 ,而 不 是 400 像 素 x300 像 素 , 这 样 会 让 图 像 缩 小 ， 


为 原始 尺寸 创建 的 样式 对 2x 版 本 也 有 效 。 


12.6 兼容 旧版 IE 


对 于 移动 优先 方法 ， 有 一 点 需要 注意 ， 
就 是 Internet Explorer 8 及 以 下 的 版 本 不 文 
持 媒 体 查询 。 这 意味 着 这 些 浏 览 器 只 会 呈现 
媒体 查询 以 外 的 样式 ， 即 基准 样式 。 目 前 ， 
在 世界 上 大 部 分 地 区 ， 使 用 IE6 和 IE7 的 
用 户 已 经 非常 少 了 。 因 此 ， 真 正 费 脑筋 去 
考虑 的 是 了 8， 它 在 全 世界 所 占 的 份额 不 到 





9%， 且 这 个 数字 还 在 下 降 (详情 参见 http:// 
gs.statcounter.com ) o 
对 于 IE8 (及 更 早 的 版 本 ) ， 有 三 种 解决 
方法 。 
口 什么 都 不 做 。 让 网 站 显示 基本 的 版 本 。 
D 为 它们 单独 创建 一 个 样式 表 ， 让 它们 
显示 网 站 最 客 的 版 本 (不 会 形成 啊 应 
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式 的 网 页 ) 。 一 种 做 法 是 复制 一 份 稼 
规 的 样式 表 ， 将 其 命名 为 old-ie.css 之 
类 的 文件 名 。 将 媒体 查询 语句 去 掉 ， 
但 保留 其 中 的 样式 规则 。 在 HTML 
中 添加 条 件 注 释 ， 从 而 让 不 同 的 浏 
昂 磊 部 能 找到 正确 的 样式 表 (参见 
图 12.6.1 ) 。 

口 如 采 硕 望 页 面 有 啊 应 式 的 效 末 ， 了 就 
在 页 面 中 引入 respond.min.js (参见 
图 12.6.2 ) 。Scott Jehl 创建 了 这 段 简 
短 的 代码 ， 它 让 min-width 和 max- 
width 媒体 查询 对 旧版 下 也 有 效 。 参 
见 补 元 材 料 。 














<head> 


<!--[if gt IE 8]><!--> 

<link rel="stylesheet" 
href="css/styles.css” /> 

<!--<![endif]--> 


<!--[if lt IE 9]> 
<link rel="stylesheet" 
href="css/old-ie.css”" /> 
<![endif]--> 
</head> 





图 12.6.1 这 里 有 很 多 看 起 来 很 怪异 的 代码 。 
你 可 能 不 熟悉 的 代码 是 条 件 注 释 ( 参见 www. 
quirksmode.org/css/condcom.html ) 。 第 一 个 条 件 注 
释 包 含 的 是 为 IE8 及 更 旧版 本 以 外 的 所 有 浏览 硕 准 
备 的 样式 表 。 第 二 个 包含 的 则 是 仅 为 IE9 以 下 的 
IE 准备 的 样式 表 





<head> 


<link rel="stylesheet" 
href="css/styles.css” /> 


<!--[if lt IE 9]> 
<script src= js/respond.min.js > 
</script> 
<![endif]--> 
</head> 





12.6.2 将 src 值 里 的 js 部 分 替换 为 你 网 站 中 
的 地 址 (如 果 跟 这 里 的 不 一 样 的 话 ) 。 设 置 好 以 后 ， 
IE8 及 以 下 版 本 会 理解 min-width 和 max-width 媒 
体 查 询 ， 并 呈现 相应 的 样式 。 这 样 做 的 话 ， 就 没有 
必要 将 正 样式 表 分 离 出 来 了 。 这 个 script 元 又 外 
围 的 条 件 注 释 是 可 选 的 ， 不 过 如 果 包 含 的 话 ， 就 只 
有 了 IE8 及 以 下 版 本 会 加 载 respond.min.js 


第 二 种 方法 更 可 徘 , 它 让 IE8 用 户 也 能 











看 到 网 站 的 完整 布局 。 
如 果 使 用 Sass、LESS 或 Stylus 这 类 


CSS 预 处理 器 ， 就 可 以 自动 创建 为 旧版 下 准 
备 的 样式 表 。Nicolas Gallagher 分 享 了 一 个 
使 用 Sass 的 方法 (http://nicolasgallagher.com/ 


mobile-first-css-sass-and-ie/ ) 。 


使 用 Respond.js 

可 以 访问 https://github.com/scottjehl/ 
Respond， 点 击 ZIP 按钮 下 载 Respond.js。 
下 载 到 电脑 后 ， 打 开 该 zip 文 件 ， 然 后 将 
respond.min.js 复制 到 你 网 站 的 一 个 文件 夹 
里 。 如 果 这 段 脚本 不 起 作用 ,不妨 看 看 上 
述 GitHub 链接 中 的 Support && Caveats ( 支 
持 与 注意 事项 ) 部 分 。Respond.js 并 不 是 一 
A 
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使 用 Web 字体 


本 章 内 容 

口 什么 是 Web 字体 

口 在 哪里 能 找到 Web 字体 

口 下 载 第 一 个 Web 字体 

口 理解 afont-face 规则 

D 为 Web 字体 添加 样式 

口 为 Web 字体 应 用 斜体 和 粗 体 
口 使 用 Google Fonts 的 Web 字体 


过 去 几 年 ， 我们 看 到 了 在 万 维 网 上 使 用 
字体 的 复兴 。 过 去 ， 我 们 通 篆 只 能 在 非常 有 
限 的 字体 集中 进行 选择 。 我 们 在 第 10 章 中 
提 到 过 ， 最 好 使 用 那些 用 户 很 可 能 在 目 己 的 
电脑 上 安装 了 的 字体 。 这 也 是 大 多 数 网 站 将 
body 字体 设 为 Arial、Georsgia、Verdana 或 
Trebuchet MS 的 原因 。 

现在 有 了 Web 字体 ， 我 们 在 开发 Web 项 
目 时 有 了 大 量 字 体 可 供 选 择 。 因 此 ，Web 设 
计 师 可 以 为 访问 者 提供 更 为 精细 的 体验 。 经 
历 这 种 改变 既 让 人 看 迷 ， 又 令 人 激动 。 

本 章 解释 了 Web 字体 的 基础 ， 如 何 使 用 
目 托 管 的 Web 字体 (例如 Font Squirrel 提供 
的 字体 ) ， 如 何 使 用 Google Font。 学 会 如 何 
使 用 自 托 管 的 字体 需要 花费 较 多 的 时 间 。 如 
果 你 想 在 自己 的 网 站 上 尽快 用 上 Web 字体 ， 
可 以 阅读 13.7 市 。 














13.1 什么 是 Web 字体 


CSS 规则 @font-face 为 Web 字体 创造 了 
可 能 ， 该 样式 规则 允许 CSS 链接 到 服务 大 上 
的 一 种 字体 供 网 页 使 用 。 

很 多 人 认为 web 字体 是 新 生 事物 。 实 
际 上 ，Web 字体 大 约 在 1998 年 就 产生 了 。 
Netscape Navigator 4 和 Internet Explorer 4 均 
采用 了 这 种 搁 术 ， 但 它们 的 实现 邵 不 支持 标 
准 的 字体 文件 格式 , 因此 很 少 有 人 用 到 它们 。 
下 到 将 近 十 年 以 后 ,浏览 各 才 开 始 采 纳 这 种 
使 用 更 为 常见 的 字体 文件 格式 的 标准 ，Web 
字体 的 使 用 才 变 得 常见 起 来 。 


1. Web 字体 文件 格式 和 浏览 器 支持 
Web 字体 可 以 使 用 一 系列 文件 类 型 。 需 
要 特别 指出 的 是 ， 下 面 介 绍 的 前 三 种 字体 类 
型 是 如 今 经 常 使 用 的 。 
口 内 和 通 OpenType ( Embedded OpenType， 
.eot ) 。 在 使 用 @font-face 时 ，Internet 
Explorer 8 及 之 前 的 版 本 仪 支持 内 骸 
OpenType。 内 骸 OpenType 是 Microsoft 
的 一 项 专 有 格式 ， 它 使 用 数字 版 权 管 
理 技 术 防 止 在 未 经 许可 的 情况 下 使 用 
字体 。 
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第 13 章 ， 使 用 Web 字体 


DO TrueType ( .ttff ) 和 OpenType ( .otf ) ， 


台式 机 使 用 的 标准 字体 文件 类 型 。 
TrueType 和 OpenType 得 到 了 Mozilla 
Firefox (3.5 及 之 后 的 版 本 ) 、Opera 

(10 太 之 后 的 版 本 ) 、Safari (3.1 及 
之 后 的 版 本 ) 、Mobile Safari (iOS 4.2 
及 之 后 的 版 本 ) 、Google Chrome (4.0 
及 之 后 的 版 本 ) 及 Internet Explorer (9 
及 之 后 的 版 本 ) 的 广泛 文 持 。 这 些 格 
式 不 使 用 数字 版 权 管理 。 





口 Web 开放 字体 格式 ( Web Open Font 


Format，.woff ) 。 这 种 较 新 的 标准 是 
专 为 Web 字体 设计 的 。Web 开放 字体 
格式 的 字体 是 经 压缩 的 TrueType 字体 
或 OpenType 字 体 。WOFF 格式 还 允 
许 在 文件 上 附加 额外 的 元 数据 。 字 体 
设计 人 员 或 厂商 可 以 利用 这 些 元 数据 ， 
在 原 字 体 信息 的 基础 上 ， 添 加 额外 的 
许可 证 或 其 他 信息 。 这 些 元 数据 不 会 
以 任何 方式 影响 字体 的 表现 ,但 经 用 
户 请 求 ， 这 些 元 数据 可 以 呈现 出 来 。 
Mozilla Firefox ( 3.6 及 之 后 的 版 本 ) 、 
Opera( 11.1 及 之 后 的 版 本 )、Safari( 5.1 
及 之 后 的 版 本 ) 、Google Chrome (6.0 
及 之 后 的 版 本 ) 及 Internet Explorer (9 
及 之 后 的 版 本 ) 均 文 持 Web 开放 字体 
格式 。 

可 缩放 矢量 图 形 (Scalable Vector 
Graphics，.Svg ) 。 人 简 言 之 ， 应 避免 对 
Web 字体 文件 使 用 SVG。 它 更 多 地 用 
于 早期 Web 字体 ,因为 它 是 i0S 4.1 上 
移动 Safari 唯一 文 持 的 格式 (还 有 可 
能 引起 一 些 朋 温 的 情况 ) 。 从 10S 4.2 
(于 2011 年 初 即 被 广泛 使 用 ) 起 ， 移 
动 Safari 开始 支持 TrueType。 











可 以 看 到 ，Web 字体 的 路 平台 文 持 程 度 


是 很 高 的 ， 因 此 没有 任何 理由 不 在 今天 的 网 
站 上 使 用 它们 。 

2. 法 律 问题 

从 技术 层面 上 说 ， 字 体 都 是 小 的 软件 。 
我 认识 以 字体 设计 和 制作 为 生 的 人 ， 这 是 一 
种 艰 吉 、 细 致 的 创造 性 活动 ， 没 有 强大 的 心 
智 是 做 不 了 这 份 工作 的 。 

出 于 这 一 原因 ， 即 便 efont-face 功能 从 
一 开始 就 存在 ， 它 还 是 会 激怒 一 些 人 也 就 不 
难 理解 了 。 剃 竟 ， 如 采 浏 览 希 能 链接 并 下 载 
某 种 字体 ， 意 味 痢 任何 人 都 能 下 载 并 在 目 己 
的 计算 机 上 安装 这 种 字体 ， 无 论 他 们 是 否 购 
买 了 这 种 字体 。 

这 就 是 为 什么 Web 设计 人 员 和 开发 人 员 
必须 确保 网 站 上 用 到 的 任何 字体 都 具有 在 万 
维 网 上 使 用 的 许可 。 大 多 数 厂商 和 字体 服务 
提供 商 通 过 将 许可 作为 字体 购买 的 一 部 分 或 
来 单 选 项 提供 这 种 许可 。 

不 管 选 用 哪 种 方式 ， 确 保 对 项 目 中 使 用 
的 web 字体 具有 稳定 的 权利 。 为 此 ， 你 可 以 
查看 购买 的 字体 的 许可 证 。 有 些 字 体 可 以 在 
Adobe Photoshop 、Adobe Illustrator 等 更 面 应 
用 软件 中 使 用 ， 但 不 能 在 网 站 上 作为 Web 字 
体 使 用 。 你 要 购买 字体 的 厂商 的 网 站 通常 会 
提 到 这 些 信息 。 如 果 存 在 疑惑 ， 可 以 跟 厂 商 
联系 ， 了 解 哪些 权利 是 允许 的 。 

如 果 你 购买 了 一 个 字体 ， 并 确切 地 知道 
可 以 将 其 用 做 web 字体 ， 束 可 以 使 用 Font 
Squirrel 提供 的 免费 @font-face 生成 一 ( www. 
fontsquirrel.com/fontface/generator ) 。 该 工 
具 可 以 将 字体 转化 为 在 万 维 网 上 使 用 的 所 有 
Web 字体 文件 类 型 。 

真正 的 好 消息 是 Web 字体 服务 的 大 量 消 
现 。 通 过 它们 ， 可 以 在 网 站 上 使 用 多 达 数 干 
种 的 Web 字体 (参见 13.2 节 ) ， 其 中 很 多 还 
是 免费 的 。 
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3. 管理 文件 尺寸 

使 用 Web 字体 ， 尤 其 是 使 用 多 种 Web 字 
体 的 一 个 潜在 风险 是 它们 可 能 会 增加 页 面 的 

“重量 ”。 我 在 这 里 谈论 的 不 是 炸 草 条 和 甜 
甜 图 ， 我 谈论 的 是 千 字 节 和 兆 字 节 。 

对 于 所 有 这 些 字 体 来 说 ， 在 它们 显示 到 
页 面 上 之 前 , 都 需要 下 载 到 用 户 的 计算 机 上 。 
这 会 减 慢 网 站 加 载 的 速度 ， 尤 其 是 对 移动 用 
户 来 说 。 我 的 建议 是 审慎 地 选择 Web 字体 。 
如 果 你 发 现 自 己 使 用 了 好 几 个 Web 字体， 就 
应 该 想 办 法 对 这 些 字 体 进行 整合 了 。 

@ 构造 子 集 

廊 省 页 面 重量 的 一 种 方法 是 构造 子 集 

( subsetting ) 。 构 造 子 集 是 通过 仅 包 含 确 定 
使 用 的 字符 削减 实际 字体 大 小 的 方法 。 例 如 ， 
如 果 对 标题 使 用 League Gothic 字体 ， 而 网 站 
的 设计 要 求 标 题 始终 使 用 大 写字 母 ， 没 有 使 
用 小 写字 母 的 需要 。 通 过 构造 子 集 ， 可 以 将 
小 写字 母 从 字体 中 移 除 ， 这 样 字 体 文件 大 小 
束 会 减 小 一 些 。 

此 外 ， 对 于 很 多 字体 ， 你 还 可 以 选择 
针对 特定 语言 的 子 集 。13.3 市 解释 了 如 何在 
Font Squirrel 中 采用 这 种 方法 。 

解释 子 集 构 造 的 具体 细 市 已 经 超出 了 本 
书 的 范围 ， 不 过 Font Squirrel 提供 的 @font- 
face 生成 右 (之 前 提 到 过 ) 可 以 帮助 你 进行 
专家 级 的 子 集 构造 。 


13.2 在 哪里 能 找到 Web 字体 


在 网 站 上 使 用 Web 字体 有 两 种 方式 : 目 
托管 和 Web 字体 服务 。 这 两 种 方式 都 是 完全 
有 效 的 选项 ,不 过 二 者 差异 很 大 ， 各 有 利弊 。 
当 你 权衡 这 些 利 次 的 时 候 ， 你 会 发 现 并 非 所 
有 的 Web 字体 都 是 随处 可 见 的 。 你 可 能 会 发 
现 ， 即 便 你 想 采 用 日 托管 的 方式 ， 你 需要 的 
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字体 也 只 能 来 自 Web 字体 服务 。 你 还 有 可 能 
会 发 现 你 希望 使 用 的 服务 并 未 提供 你 想 要 的 
某 种 字体 。 这 时 ， 你 可 能 需要 寻找 一 种 接近 
的 蔡 代 方案 ,或 者 重新 考虑 你 的 方法 。 在 作 
出 决定 之 前 ， 需 要 花费 一 些 精力 权衡 所 有 的 
选项 并 灵活 处 理 。 


1. 自 托管 

目 托 管 Web 字体 来 源 于 你 自己 的 服务 需 ， 
就 像 其 他 的 资源 〈 如 图 像 、CSS 文件 ) 一 样 。 
如 果 需 要 与 字体 相关 的 花费 ,通常 也 是 一 次 
性 的 购买 支出 ， 是 否 将 字体 文件 上 传 到 网 站 
上 并 将 其 包含 到 代码 中 取决 于 你 目 己 。 在 接 
下 来 的 小 厄 , 我 们 会 讲解 使 用 日 托 管 服务 (使 
用 的 是 从 Font Squirrel 下 载 的 一 蒜 免 费 Web 
字体 ) 的 详细 步骤 。 

寻找 可 以 自 托 管 的 字体 是 比较 容易 的 ， 
为 它们 的 数量 很 多 。 它 们 的 质量 和 价格 差 
异 很 大 (有 的 苏 至 是 免费 的 ) 。 其 中 一 些 流 
行 的 目 托 管 字体 来 源 如 下 。 

口 Font Squirrel ( www.fontsquirrel.com ) ， 

参见 图 13.2.1 























HOME 本 


1 


Free torts hyve mat te me 


match We tnow hom hong % 4 00 nd quaiity Ireewere thet 4 IKeneed hor 
(Oe ob Ne ve Eon the 1 oh AS salecting ihese roeloces ond pesentmg hem to 
Ah Here pre so 


to eee fo 


Source Sans Pro AaBbCcDdEeFfGgHhl 
eos E> 


ee pr 


D0 we 


pe 


BOB000000000609 


' 
| 
© 
| 


al 


096096666666660 





13.2.1 Font Squirrel 是 寻找 可 以 目 行 托管 的 免 
费 Web 字体 的 一 个 流行 的 网 站 。 在 本 章 接 下 来 的 
小 节 里 ， 你 将 学 会 如 何 使 用 它 。 你 北非 必须 要 了 解 
使 用 Google Fonts 这 样 的 Web 字体 服务 的 全 部 细 
节 , 但 了 解 它们 有 助 于 理解 web 字体 的 工作 原理 ， 
并 了 解 一 些 常 见 的 隐 阱 
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口 MyFonts (http://myfonts.com ) 

口 The League of Moveable Type ( www 
theleagueofmoveabletype.com ) ， 倪 费 

口 FontShop〈www.fontshop.com ) 


2. Web 字体 服务 

Web 字体 服务 通常 提供 订购 Web 字体 的 
方法 。 这 种 方式 是 指 按 月 或 按 年 支付 使 用 字体 
的 版 权 费 用 ， 而 不 是 彻底 买 断 字体 。Typekit 
是 这 个 领域 的 先驱 ,现在 已 经 存在 几 种 服务 了 。 

这 些 服 务 托 管 伴 体 ， 方 用 月 提供 一 
小 段 代码 放 在 其 网 页 中 。 这 段 代 码 可 能 是 
JavaScript， 也 可 能 是 CSS， 这 取决 于 服务 目 
村。 它 包 含 了 从 远程 服务 顺 获 取 字 体 文件 并 
将 其 显示 在 网 站 上 这 一 过 程 所 需 的 全 部 代码 。 
很 多 人 主张 使 用 这 种 方式 ， 因 为 这 种 方式 通 
津 比 单独 购买 字体 更 便宜 ， 而 且 它 让 用 户 有 
机 会 尝试 很 多 种 不 同 的 字体 。 

一 些 流 行 的 Web 字体 服务 包括 : 

OD Cloud.typography ( www.typography. 


























com/cloud/welcome/ ) 
D Edge Web Fonts (www.edgefonts. 
com ) ， 人 包 费 
口 Fontdeck ( http://fontdeck.com ) 
口 Fonts.com ( www.fonts.com/web-fonts ) 
口 Fontspring.com ( www.fontspring.com ) 
DD Google Fonts (www.google.com/ 
fonts ) ， 免 费 ， 人 参见 网 13.2.2 
OD Typekit (https://typekit.com ) 
口 WebINK (www.webink.com ) 
按理 说 ，Web 字体 服务 可 以 提供 比 自 托 
管 更 多 的 特性 。 如 果 出 现 了 更 好 的 字体 文件 
或 代码 ， 服 务 便 可 以 很 容易 地 将 它们 提供 给 
用 户 。 例 如 ，Typekit 中 的 一 些 字 体 使 用 基于 
PostScript 的 轮廓 ， 在 Windows 浏览 部 上 显示 
这 些 字 体 时 ，Typekit 会 提高 它们 的 品质 ， 让 
它们 的 边缘 看 起 来 更 平滑 。 
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13.2.2 Google Fonts 是 一 种 流行 的 免费 Web 字 
体 服务 。 我 们 将 在 13.7 节 学 习 如 何 使 用 它 


在 这 类 服务 中 ,很 多 都 使 用 JavaScript 
能 入 获取 Web 字体 的 代码 。 这 样 做 有 一 些 好 
处 ， 也 有 一 些 不 好 的 地 方 。 在 这 一 过 程 中 ， 
JavaScript 做 了 不 少 工作 ， 包 括 微调 Web 字体 
显示 设置 ， 为 字体 本 和 号 的 加 载 提供 额外 的 控 
制 。 这 种 控制 可 以 产生 更 好 的 体验 。 

这 种 奢华 的 代价 当然 是 你 必须 百分之百 
地 依赖 JavaScript， 而 JavaScript 会 影响 页 面 
的 性 能 。 在 Web 字体 呈现 在 页 面 上 之 前 ， 用 
户 必 须 等 待 JavaScript 加 载 完 成 。 这 是 你 决定 
如 何在 网 站 上 加 入 Web 字体 时 需要 记 住 的 事 
情 。 不 过 别 因 此 拒绝 使 用 Web 字体 服务 ， 很 
多 人 , 包括 我 自己 , 使 用 Web 字体 都 很 顺手 。 


3. Web 字体 的 质量 与 显示 

不 乱 的 是 ， 并 非 所 有 的 Web 字体 都 是 
一 样 的 。 不 同 浏 览 右 中 Web 字体 显示 的 歼 
果 具 有 很 明显 的 差异 。 一 些 字 体 在 Internet 
Explorer 较 早 的 版 本 中 显示 效果 并 不 太 好 ， 这 
一 点 尤为 明显 。 

此 外 ， 有 些 字 体 在 某 些 字体 大 小 下 的 显 
示 效 果 要 好 于 其 他 字体 大 小 下 的 效果 。 它 们 
有 可 能 过 于 纤细 ， 不 适合 用 来 做 正文 字体 ， 
或 者 用 做 标题 时 缺乏 权重 。 
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当 你 选择 字体 时 ， 要 尽量 检查 你 即将 选 
择 的 字体 在 各 种 浏览 希 中 显示 的 效果 。 现 在 ， 
由 于 很 多 Web 字体 公司 提供 Web 字体 的 实时 
示例 ， 有 的 公司 提供 字体 在 不 同 浏览 硕 和 平 
台中 的 截图 , 因此 上 述 工作 就 变 得 容易 多 了 。 

如 果 你 坚持 日 己 做 这 些 测试 , 可 以 试 试 Web 
Font Spee Ton ( http://webfontspecimen.com ) 


提供 的 资源 。 这 是 一 个 测试 Web 字体 在 各 种 





图 标 字体 以 及 如 何 获 取 
图 标 字 体 指 的 是 包含 图 标 而 非 字 母 、 
它们 添加 样式 ， 如 设置 颜色 。 


图 标 字 体 最 棒 的 一 点 是 ， 无 论 使 用 什么 样 的 字体 大 小 ， 
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环境 和 字体 大 小 下 的 显示 效果 的 工具 。 


4. 那么 ， 如 何 开 始 呢 

本 草 接 下 来 的 章节 将 关注 两 个 方面 的 
内 容 如 何 使 用 自 托管 的 Web 字 体 (参见 
图 13.2.1) 和 如 何 使 用 Google Fonts ( 参见 
图 13.2.2 ) 。 其 中 , Google Fonts 更 为 简单 直接 ， 
因此 你 可 以 和 完 从 那里 开始 。 





数字 和 标点 符号 的 字体 。 你 可 以 像 对 待 文字 那样 对 


它们 都 会 平滑 缩放 ， 边 缘 总 是 很 


锐利 ,因此 对 图 标 图 像 来 说 这 是 一 个 很 好 的 选择 ,因为 无 需 再 为 让 它们 在 不 同类 型 的 显示 屏 ( 包 
括 Retina 显示 屏 ) 上 或 应 用 不 同 字 体 大 小 的 响应 式 页 面 上 都 清晰 显示 而 做 额外 的 工作 。 


在 第 11 章 和 第 12 章 的 示例 页 


面 的 报头 中 ， 我 使 用 Fontfabric ( www.fontfabric.com ) 提 


供 的 Socialico 创建 了 社交 网 站 图 标 。 通 过 将 其 上 传 到 Font Squirrel 的 Webfont Generator 创建 


了 页 面 所 需 的 Web 字体 格式 。 


Chris ww 收集 了 大 量 获 取 图 标 字 体 的 资源 (参见 http://css-tricks.com/flat-icons-icon- 


fonts/ ) ， 


还 演示 了 如 何 使 用 IcoMoon (http:Wicomoon.io ) 创建 开发 人 员 自 己 的 图 标 字 体 ( 参 


见 http://css-tricks.com/video-screencasts/113-creating-and-using-a-custom-icon-font/ ) 。 


13.3 下 载 第 一 个 Web 字体 


在 页 面 中 使 用 目 托 管 的 Web 字体 为 元 素 
添加 样式 时 ， 需 要 先 将 Web 字体 文件 下 载 下 
来 。 下 载 免 费 的 Web 字体 很 快 也 很 方便 。 我 们 
将 使 用 Font Squirrel, 不 过 使 用 其 他 字体 服务 
提供 商 所 需 的 操作 与 下 面 的 步 又 都 是 相似 的 。 


1. 从 Font Squirrel 下 载 Web 字体 
(1) 访问 Font Squirrel ( www.fontsquirrel. 
com ) ， 选 择 一 种 你 希望 使 用 的 字体 。 有 很 多 
浏览 字体 的 方式 ,如 通过 主页 ,通过 Popular( 流 
行 ) 或 Recent (最 新 ) 板块 , 或 者 通过 搜索 。 
文 里 选择 了 PT Sans( 如 图 13.3.1 所 示 ) 。 
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Sans Serif 1 Style 


Sans Serif B Styles 





13.3.1 通过 点 击 字 体 的 名 称 (如 图 所 示 ) 选择 
字体 ， 而 不 要 使 用 右边 的 蓝 色 下 载 按钮 ( 图 中 未 显 
示 ) 。 那 个 下 载 链接 用 于 在 你 的 系统 中 使 用 对 应 的 
字体 ， 而 非 用 于 下 载 web 字体 文件 


(2) 在 字体 所 在 的 页 面 选 择 Webfont Kit 
(如 图 13.3.2 所 示 ) 。 
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站 AN 


人 D000 Paratype | SansSerif | 8Sstyles 


Specimens Test Drive Glyphs 


License np Kit 





| PT Sans Regular _ 








13.3.2 ”Specimens 部 分 让 你 可 以 看 到 字体 在 常 
规 、 加 粗 、 和 斜体 等 文本 样式 ( 取决 于 字体 提供 的 样式 ) 
下 的 字体 效果 。 可 以 在 Test Drive 部 分 输入 一 些 文 
本 并 查看 效果 。Glyphs 部 分 会 显示 字体 中 的 每 个 字 
符 ， 而 License 部 分 则 会 说 明 哪 些 使 用 情形 是 允许 
的 。 如 果 你 看 上 了 某 款 字体 ， 请 进入 Webfont Kit 

















(3) 在 Choose Font Formats ( 选择 字体 格 
式 ) 中 ， 取消 SVG 选项 ( 如 图 13.3.3 所 示 ) 。 
如 果 你 需要 让 使 用 Internet Explorer 8 ( 或 更 早 
版 本 ) 的 访问 者 看 到 你 的 Web 字体 ， 则 需要 
选择 EOT， 否 则 不 选择 该 项 。 





thoose Font Formatss 


图 TTF 图 EDT 加 WOFF SVG 





13.3.3 SVG 不 再 是 推荐 的 web 字体 格式 ， 
此 这 里 对 它 取消 选择 。 如 果 你 认为 访问 你 的 网 站 的 
IE8 用 户 不 多 ， 则 不 必 选 择 EOT 

(4) 选择 字体 的 子 集 。 通 常 ， 要 么 使 用 默 
认 选 项 ,要么 选择 网 站 内 容 所 使 用 的 语言 (这 
里 选择 English， 如 图 13.3.4 所 示 ) 。 


Choose a Subset: 


| Esperame 
| Estonian 
Faroese 

| French 





13.3.4 ”对 一 种 Web 字体 构造 子 集 可 以 减少 其 
包含 的 字符 数量 ， 从 而 减 小 文件 大 小 


(5) 点 击 DOWNLOAD @FONT-FACE KIT 


按钮 ( 如 图 13.3.5 所 示 ) 下 载 应 该 会 立即 开始 。 
下 载 的 文件 为 ZIP 包 。 
13.3.5 ”将 字体 下 载 到 


Ni 你 的 电脑 


(6) 下 载 完成 后 ， 打 开 压 缩 包 ， 应 该 看 到 
一 个 名 为 web fonts 的 文件 里 ， 里 面 至 少 有 一 
个 字体 文件 夹 ( 如 图 13.3.6 所 示 ) 。 





SAA 园 PT-Sans-fontfacekit 


Ls | = ERESY 人 
Size 


团 How_to_use_webfonts.html 10 KB 
Paratype PT Sans Free Font License.txt 3 KB 
v 和 web fonts -— 
v 同 ptsans_bold_english -~ 
团 PTS75F-demo.html 24 KB 
国 PTS75F-webfont.eot 18 KB 
站 PTS75F-webfont.ttf 39 KB 
国 PTS75F-webfont.woff 19 KB 
# jl specimen files -= 
男 stylesheet.css 
了 Nl ptsans_bolditalic_english -— 
六 PTS76F-demo.htmil 24 KB 
国 PTS76F-webfont.eot 18 KB 
PTS76F-webfont.ttf #1 KB 
国 PTS76F-webfont.woff 20 KB 
bp specimen 有 les 
男 stylesheet.css 
7 国 ptsans_italic_english = 
图 PTS56F-demo.html 24 KB 
国 PTS56F-webfont.eot 18 KB 
吉 PTS56F-webfont.ttf 39 KB 
国 PTS56F-webfont.woff 19 KB 
b Bl specimen files 
i stylesheet.css 
T 人 ptsans_regular_english < 
辆 PTS55F-demo.html 24 KB 
国 PTS55F-webfont.eot 18 KB 
- PTSSSF-webfont.ttf 39 KB 


374 bytes 


388 bytes 


378 bytes 


国 PTS55F-webfont.woff 19 KB 
bp Nl specimen files -= 
加 stylesheet.css 
» a ptsanscaption_bold_english 
bp a ptsanscaption_regular_english 
>» ON ptsansnarrow_bold_english 
» | ptsansnarrow Tegular english 


13.3.6 天 哪 ， 怎 么 会 有 这 人 么 多 文件 和 文件 夹 ! 
为 什么 有 这 人 么 多 呢 ? 在 第 (3) 步 (如 图 13.3.3 所 示 ) 
中 选择 的 字体 不 同 ， 这 里 看 到 的 文件 和 文件 夹 数量 
也 不 一 样 。 如 果 在 Font Squirrel 的 PT Sans 页 面 中 
选择 Specimens 标签 页 ( 如 图 13.3.2 所 示 ) ， 将 会 
看 到 8 种 字体 ( 如 图 13.3.7 所 示 ) 。 它 们 代表 了 
PT Sans 的 不 同样 式 和 粗细 版 本 。 我 们 选择 了 三 种 
格式 ， 因 此 ZIP 文件 里 就 有 八 种 字体 的 文件 夹 ， 
个 文件 夹 里 都 有 各 目的 三 种 格式 的 字体 文件 ， 以 及 
示例 HTML 和 stylesheet.css 文件 。 在 本 章 中 ， 我 
仅 使 用 图 中 显示 的 四 个 展开 的 文件 夹 中 的 字体 文件 
以 及 stylesheet.css 中 的 部 分 代码 


380 bytes 
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LE Ss = 三 三 一 一: 
PT Sans AaBbCcDdEeFfGgHhIijJjKkLIMmN 
PT Sans ltalic AaBbCcDdEeffGgHhIijKKLIM 
PT Sans Bold AaBbCcDdEeFfGgHhIiJjKkLL 


PT Sans Caption AaBbCcDdEeFfGgH 
PT Sans Caption Bold AaBbCcDdEeF 
PT Sans Narrow AaBbCcDdEeFfGgHhIJIKkLIMmNN 
PT Sans Narrow Bold AaBbCcDdEeFfGgHhIJIKKLL 





13.3.7 PT Sans 有 三 个 版 本 ， 共 8 种 样式 : PT 
Sans( 和 常规、 加 粗 、 和 斜体 和 加 粗 斜体 ) 、PT Sans 
Caption( 常规 、 加 粗 ) 以 及 Pt Sans Narrow ( 常规 、 
加 粗 ) 。 本 章 不 会 用 到 PT Sans Caption 或 PT Sans 
Narrow。 有 些 字体 只 有 很 少 的 几 种 样式 ， 有 的 甚至 
只 有 一 种 样式 ( 如 Bebas Neue ) 


2. 在 demo.html 文件 中 查看 所 选 字体 

Web 字体 文件 夹 中 的 每 个 文件 夹 都 有 一 
个 演示 该 字体 的 HTML 页 面 。 其 文件 名 均 以 
-demo.html 结尾 。 在 浏览 锅 中 打开 该 文件 ， 如 
图 13.3.8 所 示 (参见 2.7 市 ) 。 











PT Sans Bold 


ABCDEFGHIJKLMNOPORS 
TUVWXYZabcdefghijklmn 
opqrstuvwxyz123456789 
0&.,?!1@ ()#$%*+-=:; 





13.3.8 ”从 Font Squirrel 下 载 的 PT Sans 字体 
包 中 的 PTS75F-demo.html 文件 。 这 个 文件 位 于 
ptsans_bold_english 文件 来。 如 果 要 查看 其 他 的 PT 
Sans 样式 ， 就 打开 对 应 的 文件 夹 中 的 演示 文件 ( 例 
如 ptsans_regular_english 文件 夹 中 的 PTS55F-demo. 
html ) 。 每 个 文件 夹 里 都 包含 一 个 stylesheet.css 





13.4 理解 @font-face 规则 265 


演示 文件 显示 Web 字体 是 有 效 的 。 这 很 
让 人 激动 ! 在 你 欢 庆 胜 利之 前 ， 我 们 将 在 下 
一 节 进 一 步 探讨 其 工作 原理 ， 以 及 如 何 将 它 





用 到 你 目 己 的 页 面 中 去 。 
9 通常 ， 一 个 页 面 中 不 应 使 用 两 个 (最 


多 三 个 ) 以 上 的 Web 字体 ， 因 为 引用 的 字体 
文件 越 多 ， 访 问 者 浏览 器 要 下 载 的 文件 就 越 
多 。 这 样 会 减 慢 页 面 加 载 和 呈现 的 速度 ， 特 
别 是 对 于 使 用 智能 手机 等 设备 (意味 着 较 慢 
的 网 络 连接 ) 的 访问 者 ， 体 验 就 更 糟糕 了 。 
需要 说 明 的 是 ， 这 里 说 的 数量 指 的 是 一 种 或 
多 种 衬 体 的 两 种 或 三 种 样式 或 粗细 版 本 。 例 
如 ，PT Sans 常规 、 加 粗 和 斜体 算 三 种 ， 因 此 
如 果 你 引入 了 另 一 种 Web 字体 系列 ， 则 至 少 
引入 了 四 种 字体 。 


你 开始 下 一 个 项 目 之 前 ， 想 获得 选择 
字体 的 灵感 吗 ? Typekit 团队 写 了 一 篇 很 好 的 
博客 文章 ， 这 篇 文章 介绍 了 大 量 关 于 Web 字 
体 及 一 般 性 排版 的 有 用 信息 。 初 学 者 可 以 尝试 
阅读 Sites we like ( 我 们 喜爱 的 网 站 ) 系列 ， 参 
见 http://blog.typekit.com/category/sites-we-like/。 


需要 在 Photoshop 中 使 用 这 些 字 体 
吗 ? 你 可 以 将 Web 字体 包 中 的 TrueType ( :ttf ) 
字体 装 到 你 自己 的 计算 机 上 。 安 装 完 成 后 就 
可 以 像 使 用 其 他 字体 一 样 使 用 该 字体 了 。 


13.4 理解 Qfont-face 规则 


现在 ， 是 时 候 看 看 Web 字体 的 工作 原理 
了 。 让 我 们 看 看 前 四 个 PT Sans 字体 文件 夹 中 
的 stylesheet.css 文件 。 每 个 文件 都 有 一 条 为 
一 种 PT Sans 样式 准备 的 规则 ， 位 于 看 起 来 有 
些 奇怪 的 efont-face { ... } 中 (如 图 13.4.1 
所 示 ) 。 
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@font-face { 
font-family: ‘pt sansregular,'; 
src: url('PTS55F-webfont.eot'); 
src: url('PTS55F-webfont.eot?#iefix') 
format('embedded-opentype'), 
url('PTS55F-webfont.woff') 
format('woff'), 
url('PTS55F-webfont.ttf') 
format('truetype'); 
font-weight: normal; 
font-style: normal; 


bl 


@font-face { 
font-family: pt_sansita]lic ; 
src: url('PTS56F-webfont.eot'); 
src: url('PTS56F-webfont.eot?#iefix') 
format('embedded-opentype'), 
url('PTS56F-webfont.woff') 


format('woff'), 
url('PTS56F-webfont.ttf') 
format('truetype'); 
font-weight: normal; 
font-style: normal; 


} 


@font-face { 
font-family: pt_sansbold ; 
src: url('PTS75F-webfont.eot'); 


} 


@font-face { 
font-family: ‘pt sansbold italic ; 
src: url('PTS76F-webfont.eot'); 





13.4.1 ”这些 样式 来 自 四 个 PT Sans 的 stylesheet.css 
文件 中 的 第 一 个 。 (我 改变 了 样式 规则 的 顺序 ， 从 
而 与 本 草 介 绍 的 顺序 一 致 。) 这 些 代码 块 都 是 一 样 
的 ， 只 有 突出 显示 的 部 分 不 一 样 。 不 一 样 的 地 方 就 
是 font-family 值 ， 即 每 种 Web 字体 文件 名 的 前 组 

( 注意: 你 可 能 注意 到 在 你 的 stylesheet.css 中 有 一 
个 额外 的 引用 SVG 的 URL。 我 在 这 里 忽略 了 这 一 
行 代码 ， 因 为 我 没有 下 载 该 格式 ) 


这 段 代 码 的 语法 与 传统 的 CSS 有 些 不 
同 ， 因 为 ofont-face 部 分 并 不 是 你 要 添加 样 





式 的 元 素 的 选择 闫 。 因 此 ， 这 上段 样式 不 会 影 
啊 任 何 元 系 的 样式 ， 而 是 让 样式 表 知 道 Web 
字体 的 存在 ， 从 而 可 以 在 其 他 的 样式 规则 中 
用 它 对 文本 设置 样式 。 ( 每 个 文件 夹 的 演示 
HTML 文件 都 会 加 载 stylesheet.css 并 包含 使 
用 该 字体 的 CSS 规则 。 ) 

每 条 规则 的 第 二 行 是 为 字体 系列 准备 
的 ， 例 如 ，font-family: 'pt sansregular'; 或 
font-family: 'pt sansbold';, 

这 建立 了 使 用 某 种 特定 的 Web 字体 的 
名 称 一 一 对 元 系 设 置 字体 时 需要 用 到 的 名 
称 ， 就 像 常 规 的 字体 一 样 。 这 个 名 称 可 以 
使 用 你 选择 的 任何 名 称 。 除 了 可 以 使 用 pt_ 
sansregular 以 外 ， 你 还 可 以 选择 Banana 或 
The Best Font Ever， 上 有 具体 情况 取决 于 个 人 。 事 
实 上 ， 我 们 在 下 一 节 为 页 面 应 用 PT Sans 字体 
时 束 会 改变 这 个 名 称 。 

这 条 样式 规则 的 下 面 几 行 告 诉 浏 览 右 字 
体 文件 的 位 置 。 其 中 包括 为 所 有 文 持 Web 字 
体 的 不 同 浏 览 吉 准备 的 字体 文件 格式 。 语 
法 看 起 来 有 些 吓 人 ， 但 我 们 的 目的 并 不 是 要 
完全 理解 它们 。 如 采 你 想 进一步 深入 人 研究 ， 
了 解 这 样 显示 的 原理 ， 我 向 你 推荐 Ethan 
Dunham 发 表 在 Fontspring 上 的 博文 ， 参 见 


www.fontspring.com/blog/further-hardening-of- 



































the-bulletproof-syntax。 


13.5 使 用 Web 字体 设置 文本 
样式 

我 们 讲 过 了 @font-face 的 语法 ， 但 还 从 
来 没有 真正 地 将 Web 字体 放 到 网 页 里 去 。 尽 
管 我 们 将 要 使 用 的 是 从 Font Squirrel 下 载 的 字 
体 ， 但 这 些 方法 也 同样 适用 于 其 他 任何 自 托 
管 的 字体 。 

在 样式 表 中 使 用 Web 字体 有 多 种 方法 。 
其 中 的 一 种 便 是 Font Squirrel 使 用 的 方法 ， 我 
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们 可 以 通过 查看 stylesheet.css 和 演示 HTML 
文件 了 解 这 种 方法 。 这 里 将 讲解 男 外 一 种 
J 

没有 哪 种 方法 完全 正确 或 完全 错误 ， 
不 过 个 人 推荐 我 们 即将 介绍 的 方法 。 它 更 接 
近 你 所 习惯 的 使 用 常规 字体 为 文本 设置 样式 
的 方式 ， 也 更 方便 管理 ( 尤其 是 对 于 刚 接 触 
Web 字体 的 人 来 说 ) ， 而 且 还 能 提供 Web 字 
体 无 法 加 载 时 的 备用 方法 。 

重 好 ， 第 二 种 方法 所 需 的 CSS 与 第 一 种 
方法 的 差不多 。 因 此 ， 我 们 将 在 目 己 的 样式 
表 中 使 用 PT Sans stylesheet.css 中 的 第 一 个 文 
件 里 的 四 个 efont-face 样式 规则 ， 并 根据 需 
要 对 其 进行 修改 。 现 在 ， 我 们 只 需要 用 到 字 
体 的 常规 样式 。 下 一 市 将 用 到 字体 的 斜体 、 
加 粗 以 及 加 粗 斜体 等 样式 。 

我 们 将 使 用 图 13.5.1 中 的 HTML， 并 将 
CSS 放 人 和 人 example.css( 这 个 文件 目前 是 空 的 )。 
尽管 我 们 要 使 用 的 是 PT Sans， 不 过 下 面 我 们 
将 按照 一 种 通用 的 方式 介绍 各 个 步骤 ， 从 而 
可 以 很 方便 地 将 这 些 步 又 应 用 到 Font Squirrel 
中 的 任何 字体 。 同 样 地 ， 这 种 方法 也 适用 于 
任何 自 托管 的 Web 字体 。 


使 用 Web 字体 为 普通 文本 设置 字体 样式 
的 步 又 

(1) 看 看 13.3 节 中 介绍 的 从 Font Squirrel 
下 载 的 ZIP 文件 中 的 web fonts 文件 夹 。 如 果 
你 看 到 一 个 字体 的 常规 文本 版 本 的 子 文件 夹 ， 
就 打开 该 子 文件 中 的 stylesheet.css。 

(2) 将 为 常规 文本 准备 的 @font-face 样式 
规则 复制 到 你 目 己 的 样式 表 中 (如 图 13.5.2 
所 示 ) 。 

(3) 将 字体 文件 (图 13.5.2 所 示 的 样式 表 
中 引用 的 字体 文件 ) 从 Font Squirrel 文件 夹 
复制 到 包含 你 的 样式 表 的 文件 来 ( 如 图 13.5.3 
所 而 小 有 









































13.5 使 用 Web 字体 设置 文本 样式 267 


《!DOCTYPE html> 

<html Jang= en > 

<head> 
<meta charset="utf-8" /> 
<title>Styling Text with a Web Font </title> 
<link rel="stylesheet" 

href="example.css" /> 

</head> 

<body> 

<h1>Local Teen Prefers Vinyl Over Digital</h1> 


<p>A local teenager has replaced all her 


digital tracks with vinyl. "It's <em> 
really</em> groovy, she said, on the 
record. Without skipping a beat, she added, 
"Besides, it's like going through a time 
warp. </p> 


<p>Some of her iPod-toting classmates aren't 
as enthusiastic. “Yeah, they needle me 
about it. What a bunch of ones and 
zeros. </p> 

</body> 

</html> 





图 13.5.1 我 将 从 一 个 简单 的 HTML 页 面 和 一 个 
空白 的 样式 表 开 始 。 为 了 简化 ， 两 个 文件 都 放 在 
同一 个 目录 。 注 意 ， 该 目录 下 并 没有 包含 任何 PT 
Sans 字体 文件 





/* example.css */ 


@font-face { 
font-family: 'pt sansregular'; 
src: url('PTS55F-webfont.eot'); 
src: url('PTS55F-webfont.eot?#iefix') 
format('embedded-opentype'), 


url('PTS55F-webfont.woff') 
format('woff'), 
url('PTS55F-webfont.ttf') 
format('truetype'); 
font-weight: normal; 
font-style: normal; 





} 


13.5.2 ”我 更 新 了 example.css， 从 而 让 它 包 含 
ptsans_regular_enslish 文件 夹 中 stylesheet.css 里 的 
@font-face 样式 规则 

(4) 对 font-family 值 进行 重 命 名 ， 让 该 
名 称 成 为 字体 的 人 代号。 例如， 使 用 字体 的 名 
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称 、 短 横 线 和 风格 名 称 〈 如 图 13.5.4 所 示 ) 。 
(你 选择 的 名 称 并 不 重要 ， 重 要 的 是 你 需要 
在 font-family 中 对 该 字体 支持 的 所 有 风格 
(如 常规、 加 粗 、 和 斜体 、 加 粗 和 斜体 ) ， 都 要 
使 用 同样 的 名 称 。 当 你 通过 下 一 节 学 会 如 
何 应 用 不 同 的 风格 以 后 ， 这 样 做 会 显得 尤其 
重要 。 ) 

(5) 使 用 你 最 熟悉 的 方法 ， 创 建 为 文本 
元 素 添 加 样式 的 规则 。 为 应 用 Web 字体 ， 
在 样式 规则 中 输入 font-family: "Web Font 
Name';， 其 中 的 Web Font Wame 是 第 (4) 步 中 
创建 的 名 称 ( 如 图 13.5.5 所 示 ) 。 最 后 ， 一 
定 要 保存 文件 。 
















S99 FT-Sans-fontfacekit 
[<l»)|3: 了 Bm mm 可 | 闪 z| 殉 方 


7 I ptsans_regular_english 
图 PTS55F-demo.html 
- PTS55SF=-Webfont.eot 
国 PTS55F-webfont.ttf 

EEE 
» | specimen files 
男 stylesheet.css - 
上 | ptsanscaption bold @AOA 辐 web font example 


p Ol ptsanscaption_reg | 二 | 基 | | 68 [于 Ma lal | 司 | 六 |yy 


男 example.css 
国 PTS55F-webfontieot 
癌 PTS55SF-Webfont.ttf 














国 PTS55F-webfont,woff 
号 styling-text=with-web-font.html 


13.5.3 ”我 将 从 Font Squirrel 下 载 的 文件 夹 中 的 
三 个 PT Sans Regular 字体 格式 文件 (上 ) 复制 到 
我 的 示例 文件 夹 (下 ) 


/* example.css */ 


@font-face { 


font-family: "PTSans '; 
src: url('PTS55F-webfont.eot'); 





13.5.4 对 example.css 所 做 的 唯一 改动 是 将 pt_ 
sansregular 替换 为 PTSans， 这 样 的 名 称 更 接近 字 
体 本 刁 


/* example.css */ 


body { 
font-family: ‘PTSans', sans-serif; 
font-size: 100%; 
line-height: 1.25; 


} 


@font-face { 
font-family: "PTSans '; 
src: url('PTS55F-webfont.eot'); 





图 13.5.5 ”这 是 对 body 应 用 的 样式 ， 看 起 来 跟 常 
规 的 CSS 没有 两 样 。 字 体 栈 中 的 font-family 名 
(在 这 个 例子 中 为 PTSans) 必须 与 @font-face 
样式 规则 中 的 名 称 一 致 。 这 里 的 font-size 和 
line-height 并 不 是 让 Web 字体 生效 的 必要 样式 规则 

如 果 你 刷新 页 面 ， 就 会 看 到 页 面 已 经 能 
显示 Web 字体 ( 如 图 13.5.6 所 示 ) 。 不 过 ， 
我 们 还 没有 结束 。 第 一 眼看 上 去 好 像 没 有 问 
题 ， 但 仔细 看 看 就 会 发 现 ， 页 面 上 呈现 的 粗 
体 和 和 斜体 是 伪 粗 体 ( 标题 ) 和 伪 和 斜体 (单词 
really )。 我 将 在 下 一 步 介 绍 如 何 修正 这 一 问题 。 








全 昌国 Styling Text with a Web Font 
styling Text with a Web Font 


Local Teen Prefers 
Vinyl Over Digital 


A local teenager has replaced all her digital 


tracks with vinyl. "lt's really groovy,” she said, 
on the record. Without skipping a beat, she 
added, "Besides, it's Like going through a 
time warp.” 


some of her iPod-toting classmates aren 't as 
enthusiastic, "Yeah, they needle me about it. 
What a bunch of ones and Zeros.” 





图 13.5.6 由 于 为 body 应 用 了 PT Sans 样式 ， 因 
此 整个 页 面 的 文字 用 的 都 是 这 种 字体 
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ED 通常 ， 我 会 将 图 13.5.5 中 的 第 一 条 使 用 单 引 号 还 是 双 引 号 

规则 写 为 body { font: 100%/1.25 "PTSans ' ， Font Squirrel 提供 的 @font-face 样式 

sans-serif; }， 即 使 用 font 向 记 法 。 这 里 规则 使 用 单 引号 而 非 双 引号 包围 字体 和 名称。 

将 规则 分 开 来 写 ， 是 为 了 更 清楚 地 演示 应 用 ”未 书 的 CSS 示例 中 忆 都 是 这 样 做 的 。 在 

Web 字体 的 方法 本 身 。 CG 
0 因此 你 可 以 根据 自己 的 喜好 挑选 任何 一 种 

考虑 到 和 简化， 上述 步骤 和 示例 中 均 假 方式 ， 

定 HTML、 样 式 表 和 字体 文件 均 位 于 同一 个 

目录 ， 但 在 实践 中 最 好 将 它们 分 开 。13.6 节 

的 最 后 一 条 提示 介绍 了 一 种 方法 。 





@font-face 方法 


Roger Johansson 在 他 的 文章 中 总 结 了 在 样式 表 中 使 用 Web 字体 的 两 种 方法 。 文章 的 URL 
很 长 ,不 过 访问 www.htmlcssvqs.comy/8ed/font-face , 页面 会 跳 转 到 他 的 网 站 ( Wwww.456bereastreet. 
com ) 上 的 那 篇 文章 。 他 首先 介绍 了 Font Squirrel 的 方法 ， 接 着 介绍 了 本 章 演 示 的 方法 。 

我 在 前 面 提 到 过 ， 我 倾向 于 使 用 第 二 种 方法 。 不 过 这 种 方法 也 有 一 定 的 局 限 性 : 如 果 对 一 
种 Web 字体 (并非 页 面 上 所 有 的 Web 字体 ) 使 用 四 种 样式 和 粗细 版 本 ，JInternet Explorer 6 ~ 8 
会 将 特殊 的 样式 和 粗细 版 本 直接 以 常规 样式 显示 。 

实践 中 ， 这 对 绝 大 多 数 情形 都 没有 影响 。 首 先 ， 我 们 通常 不 会 对 同一 种 字体 引入 四 种 不 
同 的 样式 和 粗细 版 本 。 要 知道 ， 使 用 那么 多 样式 和 粗细 版 本 ， 就 需要 浏览 器 下 载 比 正常 情况 
更 多 或 更 大 的 文件 。 

更 重要 的 是 ， 在 这 三 个 了 版 本 中 ， 只 有 IE8 在 世界 上 大 多 数 地 区 拥有 一 定 的 用 户 基数 ， 
而 且 其 用 户 份额 还 在 不 断 下 降 。 例 如 ， 截 至 本 书写 作 之 际 ，]IE8 在 欧洲 的 份额 为 6.9%， 在 北 
美 为 9.5%。 一 年 前 ， 它 的 份额 还 有 40% 其 至 更 高 。 


13.6 为 Web 字体 应 用 冬 体 和 粗 体 


如 果 你 想 对 Web 字体 添加 一 些 基本 样式 ， mW 
文 时 Web 字体 用 起 来 有 些 奇怪 .需要 记 作 的 “|VinyL Over Digital 
是 ， 对 于 Web 字体 ， 每 个 字体 只 有 一 种 粗细 
和 一 种 风格 。 如 果 你 想 使 用 粗 体 或 斜体 ， 就 需 
要 为 它们 创建 单独 的 样式 规则 ， 每 条 规则 对 应 。 图 124 在 前 -的 合子 中 ， 浏 鉴 名 让 帝 广 本 
一 个 Web 字体 文件 。 否 则 ， 浏 览 右 就 会 变 得 稍微 粗 一 点 来 模拟 粗 体 ， 让 常规 文本 稍微 倾 余 
[人 来 模拟 斜体 。 然 而 ， 我 们 需要 的 是 专门 为 该 字体 设 
伪 粗 体 或 伤 斜体 ( 如 图 13.6.1 所 下 ) ， 或 着 网 计 的 加 粗 或 斜体 版 本 。 关 于 伪 斜 体 和 伪 粗 体 ， 请 回 
时 使 用 伪 粗 体 和 伪 斜 体 〈 后 面 将 会 看 到 ) 。 顾 10.4 节 和 10.5 节 


Local [een Prefers 
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在 前 一 节 中 ， 我 们 没有 在 样式 表 中 
为 任何 文本 指定 加 粗 或 斜体 的 样式 (参见 
图 13.6.2 ) 。 那 么 这 些 样式 是 怎么 产生 的 呢 ? 
我 想 你 一 定 能 猿 出 来 ， 即 浏览 器 的 默认 样式 。 
浏览 需 会 对 hi 应 用 粗 体 ， 对 em 应 用 斜体 (如 
图 13.6.3 所 示 ) ， 就 像 你 应 用 Web 字体 之 前 
那样 。 








body { 
font-family: ‘PTSans', sans-serif; 
font-size: 100%; 
line-height: 1.25; 


} 


@font-face { 
font-family: “PT9ans ; 
src: url('PTS55F-webfont.eot'); 


font-weight: normal; 


font-style: normal; 


13.6.2 我们 不 会 在 example.css 中 的 任何 位 置 
使 用 font-weight: bold; 或 者 font-weight: italic; 


<h1i>Local Teen Prefers Vinyl Over Digital 
</h1> 


<p>...'It's <em>really</em> groovy, she said, 
on the record...</p> 





图 13.6.3 ”我们 的 标题 是 hi1， 我 们 希望 强调 的 文 
本 放 在 em 中 

等 好 要 修复 这 一 问题 相当 简单 。 步 又 与 
对 常规 文本 实施 Web 字体 是 相似 的 ， 只 是 
CSS 部 分 有 一 些 变动 。 跟 之 前 一 样 ， 我 会 以 
PT Sans 为 例 进行 讲解 ， 不 过 这 些 步 又 也 适用 
于 从 Font Squirrel 获取 到 的 其 他 字体 。 


1. 为 Web 字体 应 用 斜体 的 步骤 
(1) 看 看 13.3 方 中 介 绍 的 从 Font Squirrel 
下 载 的 ZIP 文件 中 的 web fonts 文件 夹 。 如 果 














你 看 到 一 个 字体 的 斜体 版 本 的 子 文件 夹 ， 束 
打开 该 子 文件 中 的 stylesheet.css。 

(2) 将 为 常规 文本 准备 的 @font-face 样式 
规则 复制 到 你 目 己 的 样式 表 中 ( 如 图 13.6.4 
所 示 ) 。 

(3) 将 斜体 字体 文件 (图 13.6.4 所 示 的 
样式 表 中 引用 的 字体 文件 ) 从 Font Squirrel 
文件 夹 复 制 到 包含 你 的 样式 表 的 文件 夹 (如 
图 13.6.5 所 示 ) 。 

(4) 对 font-family 值 进行 重合 名， 让 该 
名 称 与 针对 常规 文本 的 样式 规则 中 的 名 称 保 
持 一 致 (如 网 13.6.6 所 示 ) 。 

(5) 将 斜体 文本 efont-face 样式 规则 中 的 
font-style 值 改 为 font-style: italic ( 如 
图 13.6.6 所 示 ) 。 最 后 ， 一 定 要 保存 文件 。 




















body { 
font-family: 'PTSans', sans-serif; 


} 


/* 常规 文本 */ 
@font-face { 
font-family: “PT9ans ; 
src: url('PTS55F-webfont.eot'); 


} 


人 ty 斜体 文本 9 
@font-face { 
font-family: 'pt sansitalic'; 
src: url('PTS56F-webfont.eot'); 
src: url('PTS56F-webfont.eot?#iefix') 
format('embedded-opentype'), 
url('PTS56F-webfont.woff') 
format('woff'), 
url('PTS56F-webfont.ttf") 
format('truetype'); 
font-weight: normal; 
font-style: normal; 


} 





13.6.4 现在 example.css 包含 了 PT Sans Italic 
的 @font-face 规则 
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S99 PT-Sans-fontfacekit 


[as | = | 富 | 闲 了 | 2 » 
T a ptsans_italic_english 
辆 PTS56F-demo.html 
PTS56F-Webfont.eot 
国 PTSS6F-webfont.ttf 
PFTSS56F-=webfont.woff 
» 国 specimen files 


可 stylesheet.css [|@ 9 8 web fontexample 


* 大 ptsans_regular end ———— 一 a 
> Nl ptsanscaption_bolc EA | El = ml| 所 Ed |» 
De bore | 


加 example.css 

国 PTS55F-webfont'eot 
PTS55F-webfont.ttf 
国 PTS55F-webfont,woff 























国 PTS56F-webfont.eot 


1 PTSS56F-webfont.ttf 


国 PTS56F-webfont,woff 
| 呈 styling-text-with-web-font.html 


13.6.5 ”我 将 从 Font Squirrel 下 载 的 文件 夹 中 的 
三 个 PT Sans Italic 字体 格式 文件 (上 ) 复制 到 我 的 
示例 文件 夹 (下 ) 


body { 
font-family: ‘'PTSans', sans-serif; 


} 


让 带 规 交 本 3 
@font-face { 
font-family: “PT9ans ; 
src: url('PTS55F-webfont.eot'); 


font-weight: normal; 
font-style: normal; 


} 


1 笠 体 交 本 .3 
@font-face { 
font-family: “PTSans ; 
src: url('PTS56F-webfont.eot'); 


font-weight: normal; 
font-style: italic; 





图 13.6.6 ”这 里 对 代码 做 了 两 个 重要 的 改动 。 将 
font-family: 'pt sansitalic' 改 成 了 font-family: 
'PTSans' ， 从 而 与 为 常规 文本 @font-face 样式 规则 
中 取 的 名 称 保持 一 致 。 然 后 在 斜体 文本 @font-size 
样式 规则 中 对 font-style 的 值 作 了 修改 ， 以 反映 
斜体 样式 
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现在 ， 只 要 font-style: italic; 存在 ， 
无 论 是 来 日 浏 览 幕 的 默认 样式 ( 如 图 13.6.7 
所 示 ) 还 是 你 上 自己 的 样式 ( 如 图 13.6.8 所 示 ) ， 
都 会 显示 和 斜体 的 Web 字体 。 


"ts really groovy,” 


"t's really groovy, 





图 13.6.7 之 前 的 伪 和 斜体 (上 ) 与 正确 的 版 本 (下 ) 
之 间 的 差别 在 字体 a 和 e 上 表现 得 最 为 明显 。 真 正 
的 斜体 比 伪 斜体 要 小 一 些 ， 与 常规 文本 放 在 一 起 会 
显得 更 为 协调 





body { 
font-family: “PT9ans ，Sans-SeTjf; 


} 


pt 
font-style: italic; 
} 


/* 常规 文本 */ 
@font-face { 
font-family: “PT9ans ; 
src: url('PTS55F-webfont.eot'); 


font-weight: normal; 
font-style: normal; 


} 


/* 斜体 文本 */ 
@font-face { 
font-family: “PT9ans ; 
src: url('PTS56F-webfont.eot'); 


font-weight: normal; 
font-style: italic; 





图 13.6.8 ”出 于 演示 需要 ， 我 将 所 有 段落 文本 都 以 
竹 体 显示 。 这 一 样式 在 接 下 来 的 示例 中 将 被 移 除 





2. 为 Web 字体 应 用 粗 体 的 步 又 
(1) 重复 “为 Web 字体 应 用 斜体 的 步骤 ” 
中 的 第 (1]) 步 ~ 第 (3) 步 , 但 是 要 使 用 字体 
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的 粗 体 版 本 对 应 的 文件 夹 中 的 文件 。 将 粗 体 
文本 的 @font-face 样式 规则 复制 到 样式 表 中 
(对 应 应 用 斜体 样式 步骤 中 的 第 2) 步 ， 如 
图 13.6.9 所 示 ) ， 并 将 粗 体 字 体 文件 复制 到 
你 的 文件 夹 中 ( 对 应 应 用 和 斜体 样式 步骤 中 的 
第 (3) 步 ， 如 图 13.6.10 所 示 ) 。 








.常规 文本 和 斜体 文本 的 @font-face 规 则 ... 


/* 粗 体 文本 */ 

@font-face { 
font-family: ‘pt sansbold'; 
src: Url('PTS75F-webfont.eot'); 


src: url('PTS75F-webfont.eot?#iefix') 
format('embedded-opentype'), 
url('PTS75F-webfont.woff') 
format('woff'), 
url('PTS75F-webfont.ttf"') 
format('truetype'); 
font-weight: normal; 
font-style: normal; 


13.6.9 ”现在 example.css 包含 了 PT Sans Bold 
的 ofont-face 规则 


web font example 
四 | Il@|| 加 Ee 


1 i | 
-一 -一 一 me 


国 example.css 

国 PTS55F-webfont.eot 
加 PTSSSF-Wwebfont.ttf 

国 PTs55F-webfont,woff 








天 PTS56F-webfont.eot 

加 PTS56F-Wwebfont.ttf 

国 PTSs56F-webfont.wo 

国 PT575F-webfont,eot 

“| PTS75F-webfont.ttf 
PTS75F-webfont.woff 

| styling-text-with-web-font.html 





13.6.10 ”我 将 三 个 PT Sans 粗 体 文 件 从 Font 
Squirrel 文件 夹 (未 显示 在 图 中 ) 复 制 到 示例 文件 夹 。 
文件 名 均 以 PTS75F 开头 











(2) 对 粗 体 文本 @font-face 样式 规则 中 
的 font-family 值 进 行 重 命 名 ， 使 之 与 针对 
常规 文本 的 样式 规则 中 的 名 称 保持 一 致 (如 
图 13.6.11 所 示 ) 。 

(3) 将 粗 体 文本 efont-face 样式 规则 中 的 
font-weight 值 改 为 font-weight: bold ( 如 
图 13.6.11 所 示 ) 。 最 后 ， 一 定 要 保存 文件 。 





body { 
font-family: “PTSans ，Sans-SeTjf; 


} 


/* 常规 文本 */ 
@font-face { 
font-family: “PT9ans ; 


font-weight: normal; 
font-style: normal; 


} 


/* 斜体 文本 */ 
@font-face { 
font-family: “PT9ans ; 


font-weight: normal; 
font-style: italic; 


} 


/* 粗 体 文本 */ 
@font-face { 
font-family: “PTSans ; 
src: url('PTS75F-webfont.eot'); 


font-weight: bold; 
font-style: normal; 





13.6.11 我 将 font-family: "pt sansbold' 改 
成 了 font-family: "PTSans' ， 从 而 与 为 常规 文本 @ 
font-face 样式 规则 中 取 的 名 称 保持 一 致 。 然 后 在 
粗 体 文本 @font-size 样式 规则 中 对 font-weight 的 
值 作 了 修改 ， 以 反映 粗 体 样式 


现在 ， 只 要 对 文字 设置 加 粗 样 式 ， 无论 
是 来 目 浏览 器 的 默认 样式 ( 如 图 13.6.12 中 
的 hi) 还 是 你 自己 的 样式 ， 都 会 显示 粗 体 
的 Web 字体 。 例 如， 在 图 13.6.11 中 加 入 p 
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{ font-weight: bold; }， 就 会 让 所 有 的 段落 
文本 变 成 加 粗 样式 (需要 注意 的 是 ， 这 也 影 
啊 了 em 元素 ) 。 








Local Teen Prefers 
Vinyl Over Digital 


Local Teen Prefers 
Vinyl Over Digital 


A local teenager has replaced all her digital 
tracks with ER "t's ey ha " she said, 





i 
进行 比较 ， 会 发 现 正 确 的 版 本 中 字母 更 清晰 ， 字 
间距 更 合理 。 现 在 ， 我们 的 标题 为 正确 的 粗 体 ，em 
文本 为 正确 的 冬 体 ， 其 他 文本 均 为 常规 样式 





3. 为 Web 字体 应 用 粗 斜 体 的 步骤 

前 面 ， 我 们 已 经 看 到 如 何 为 文本 应 用 党 
规 、 加 粗 和 和 斜体 的 Web 字体 。 这 也 为 我 们 留 
下 了 一 个 疑问 : 如何 让 使 用 Web 字体 的 文本 
既 有 加 粗 样 式 也 有 和 斜体 样式 。 

记 住 ， 每 个 Web 字体 都 只 对 应 一 种 样式 、 
一 种 粗细 版 本 。 在 我 们 引入 的 三 种 PT Sans 字 
体 中 (参见 图 13.6.11 ) ,没有 一 种 是 为 font- 
weight: bold 和 font-style: italic 同时 存 
在 而 准备 的 。 肥 么 是 其 中 的 -种 , 要 么 都 没有 。 

这 就 是 图 13.6.13 中 的 代码 不 会 照 你 设想 的 方 
式 运 行 的 原因 。 (这 解释 了 设置 Pp { font- 
weight: bold; } 后 em 会 使 用 伪 和 斜体 的 原因 ， 
因为 em 继承 了 p 的 加 粗 样式 。) 

下 面 来 为 页 面 添 加 粗 斜 体 样式 。 

重复 “为 Web 字体 应 用 斜体 的 步骤 ”中 
的 第 (1) 步 ~ 第 (3) 步 , 但 是 要 使 用 字体 的 粗 
斜体 版 本 对 应 的 文件 夹 中 的 文件 。 将 粗 斜 体 
文本 的 @font-face 样式 规则 复制 到 样式 表 中 
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(对 应 应 用 斜体 样式 步骤 中 的 第 (2) 步 ， 如 
图 13.6.14 所 示 ) ， 并 将 粗 斜 体 字体 文件 复制 
到 你 的 文件 夹 中 (对 应 应 用 斜体 样式 步 又 中 
的 第 (3) 步 ， 如 图 13.6.15 所 示 ) 。 





body { 
font-family: 


'PTSans', sans-serif; 


font-weight: bold; 


.。. @font-face rules ... 


13.6.13 ”我 在 图 13.6.11 中 的 样式 表 中 添加 了 一 
条 规则 ， 尝 试 让 em 文本 既是 斜体 ( 默认 样式 ) 又 
是 粗 体 。 但 这 里 有 个 问题 : 我 们 没有 加 载 PT Sans 
粗 和 斜体 字体 ， 因 此 em 有 伪 冬 体 样式 (不 过 这 有 些 
难以 观察 ) 


em { 
font-weight: bold; 


.。 其 他 @font-face 规 则 .. 


/* 粗 斜 体 文 本 */ 
@font-face { 
font-family: 'pt sansbold italic ; 
src: url('PTS76F-webfont.eot'); 
src: url('PTS76F-webfont.eot?#iefix') 
format('embedded-opentype'), 
url('PTS76F-webfont.woff') 
format('woff'), 
url('PTS76F-webfont.ttf'") 
format('truetype'); 
font-weight: normal; 
font-style: normal; 





13.6.14 ”使 用 图 13.6.13 的 代码 ， 现 在 example.css 
包含 了 为 PT Sans 粗 斜 体 准备 的 efont-face 样式 
规则 
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全 日 旧 web font example 


(lo | | | | 


EE 


i example.css 

国 PT555F-webfont.eot 
站 PTSS5F-webfont.ttf 
国 PTS55F-webfont,wof 
国 PTS56F-webfont.eot 
可 PTSS6F-webfont.ttf 
国 PTS56F-webfont.woff 
国 PT575F-webfont.eot 
避 PTS75F-webfont.ttf 
PTS75F-webfont.wofft 
国 PTS76F-webfont.eot 
可 PTS76F-webfont.ttf 
PTS76F-webfont,.wo 人 ff 
| styling-text=with-web-font.html 





13.6.15 ”我 将 三 个 PT Sans 粗 斜体 文件 从 Font 
Squirrel 文件 夹 ( 未 显示 在 图 中 ) 复 制 到 示例 文件 夹 。 
文件 名 均 以 PTS76F 开头 

对 粗 和 斜体 文本 @font-face 样式 规则 中 
的 font-family 值 进行 重合 名， 使 之 与 针对 
常规 文本 的 样式 规则 中 的 名 称 保持 一 致 ( 如 
图 13.6.16 所 示 ) 。 

将 粗 斜 体 文本 @font-face 样式 规则 中 的 
font-weight 值 改 为 font-weight: bold， 同 时 
将 font-style 值 改 为 font-style: italic ( 如 
图 13.6.16 所 示 ) 。 最后, 一 定 要 保存 文件 (如 
图 13.6.17 所 示 ) 。 


如 果菜 种 Web 字体 没有 粗 体 、 斜 体 
或 粗 斜 体 版 本 ， 而 我 们 又 对 文本 添加 了 这 些 
样式 ， 浏 览 器 就 会 显示 伪 样 式 。 











有 些 字 体 ( 如 ChunkFive) 本 身 就 
很 粗 ， 没 有 粗 体 版 本 。 应 该 对 这 类 字体 使 用 
font-weight: normal; ( 即 其 常规 状态 ) ， 
为 font-weight: bold; 会 让 浏览 器 将 其 显示 
伪 粗 体 ， 这 样 它们 的 笔划 就 更 粗 了 。 





body { 
font-family: 'PTSans', sans-serif; 


em { 
font-weight: bold; 
} 


祭 员 坑 交 本 
@font-face { 
font-family: “PT9ans ; 


font-weight: normal; 
font-style: normal; 


} 


/* 斜体 文本 */ 
@font-face { 
font-family: “PT9ans ; 


font-weight: normal; 
font-style: italic; 
} 


/* 粗 体 文本 */ 
@font-face { 
font-family: “PT9ans ; 


font-weight: bold; 
font-style: normal; 


} 


/* 粗 斜 体 文本 */ 
@font-face { 
font-family: ‘PTSans'; 
src: url('PTS76F-webfont.eot'); 


font-weight: bold; 
font-style: italic; 


13.6.16 ”我 将 font-family: 'pt sansbold 
italic' 改 成 了 font-family: 'PTSans'， 从 而 与 为 
常规 文本 @font-face 样式 规则 中 取 的 名 称 保持 一 
致 。 然 后 对 font-weight 和 font-style 的 值 都 作 了 
修改 ， 以 反映 粗 斜 体 样式 
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"t's really groovy,” 





"t's really groovy,” 


13.6.17 ”变化 很 微妙 ， 伪 效果 ( 上 ) 与 正确 的 字 
体 (下 ) 相 比 ， 字 母 更 粗 一 些 ， 字 间距 也 更 大 一 些 





记 住 ， 每 一 个 样式 和 粗细 版 本 都 会 引 
入 一 个 新 的 字体 文件 ， 从 而 增加 浏览 器 要 下 
载 的 文件 大 小 , 这 会 影响 性 能 。 出 于 这 个 原因 ， 
很 多 设计 师 仅 对 标题 使 用 Web 字体 。 


绩 阮 由 于 引入 了 大 量 的 文件 ， 我 们 的 文件 
夹 看 起 来 有 些 乱 ( 如 图 13.6.15 所 示 ) 。 现 在 
你 应 该 能 看 出 将 字体 文件 与 样式 表 放 在 不 同 
文件 夹 的 原因 了 ! 图 13.6.18 显示 了 一 种 组 织 
这 些 文件 的 方式 。 你 可 能 需要 根据 这 种 结构 
调整 样式 表 中 的 每 个 Url。 例如 ，url('font/ 
PTS55Fwebfont.woff')。 同 时 ， 你 还 需要 修改 
HTML 中 引入 样式 表 的 link 元 素 以 反映 正确 
的 位 置 : 《link rel="stylesheet" href="css/ 


example.css" />。 


T ts 
男 example.css 
了 国有 mt 
国 PTs55F-webfont.eor 
" PTS55F-webfont.ttf 
国 FTs55F-webfontwoff 
国 PTS56F-webfont.eot 
J PTSS6F-webfont.rtf 
国 PTSs56F-webfontwoff 
国 PTS75F-wWebfont.eat 
7 PTS75F-webfont.ttf 
国 PTS75F-Webfont.Wo 伯 
国 FT576F=webfont.ect 
PTS76F-webfont.ttf 
PTS76F-webfont.wof 
图 styling-text—with-web-font.html 





图 13.6.18 在 这 种 结构 中 ， 字 体 文件 都 位 于 font 
文件 来， 该 文件 夹 又 位 于 css 文件 夹 中 








13.7 使 用 Google Fonts 的 Web 字体 D715 


13.7 使 用 Google Fonts 的 Web 
字体 

前 面 的 小 市 介绍 了 如 何 将 目 托 省 的 Web 
字体 添加 到 页 面 中 去 ， 例 如 使 用 Font Squirrel 
提供 的 字体 。 在 众多 托管 Web 字体 的 服务 中 ， 
我 们 来 看 看 Google Fonts (参见 13.1 节 ) 。 

同 其 他 字体 服务 一 样 ，Google Fonts 也 为 
我 们 省 下 了 创建 和 修改 efont-face 规则 的 麻 
烦 。 这 是 自 托 管 字体 和 使 用 Google Fonts 这 
类 服务 之 间 的 一 个 明显 的 区 别 (也 可 以 说 是 
Google Fonts 这 类 服务 的 一 个 优势 ) 。 

不 像 其 他 的 服务 ，Google Fonts 是 人 免费 
的 ， 它 有 几 百 种 字体 可 供 选 择 ， 而 且 使 用 它 
在 页 面 中 添加 Web 字 体 不 到 一 分 钟 就 能 搞定 ， 
因此 它 已 经 变 得 越 来 越 流 行 。 一 旦 选中 一 种 
字体 ， 省 下 我 们 要 做 的 全 部 事情 就 是 将 一 段 
Google Fonts 代码 添加 到 HTML 页 面 中 ， 然 
后 就 可 以 在 CSS 中 为 文本 应 用 字体 样式 了 。 


使 用 Google Fonts 的 Web 字体 的 步骤 

(1) 访问 www.google.com/fonts。 找 到 你 
喜欢 的 字体 后 ， 点 击 Add to Collection ( 添加 
到 集合 ) ， 如 图 13.7.1 所 示 。 

(2) 将 页 面 深 动 到 底部 , 点 击 Use( 使 用 )， 
如 图 13.7.2 所 示 。 

(3) 仅 选 择 将 要 使 用 的 字体 样式 和 粗细 
版 本 。 这 样 做 能 让 字体 文件 尽 可 能 小 〈 如 
图 J3 7 万 呈 六 























Grumpy wizards make toxic brew for the evil QI 


Lato, 10 Styles by tukasz Dziedzic 口 
13.7.1 这 里 将 Lato 添加 到 了 我 的 Web 字体 集 
合 。 此 外 还 添加 了 Open Sans( 不 过 这 里 没有 显示 )。 
这 是 我 为 第 11 章 和 第 12 章 中 的 大 部 分 示例 页 面 中 
的 标题 使 用 的 字体 
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Collection (2 font families) 


Late Normal #0o0 


OQpen Sans Normal #00 





Ghoose Review Use 


13.7.2 ”页面 的 底部 列 出 了 你 选择 的 字体 (上 ) ， 
这 块 区 域 还 有 三 个 按钮 (下 ) 。Choose( 选择 ) 按 
钮 对 应 你 现在 所 在 的 状态 一 一 浏览 字体 ， 选 择 喜 欢 
的 字体 。 点 击 Review ( 回顾 ) 按钮 可 以 看 到 更 多 
的 例子 ， 以 及 集合 中 字体 的 更 多 信息 。 点 击 Use 按 
钮 ， 便 可 以 在 页 面 中 使 用 所 选 的 字体 











1. Choose the styles you want: 日 Dpen Sans 


IBook 300 
] Ultra-Light 400 J Book 300 liglic 
Utra-Light 100 talic -Normal 400 
回 Book 300 口 Normaj 400 ltalic 
口 Book 300 ltalic Semi-Bold 500 
JjSemi-Bold 600 ltalic 
回 Bold 700 








nen di 





13.7.3 ”我 的 页 面 对 每 种 字体 均 只 需要 一 种 粗细 
版 本 。Page Load ( 页 面 加 载 ) 仪表 指示 了 字体 文 
件 大 小 对 使 用 这 些 字体 的 页 面 的 加 载 速度 的 影响 。 
现在 看 起 来 还 不 错 ， 不 过 如 果 添 加 了 其 他 的 粗细 版 
本 ， 页 面 的 加 载 时 间 就 会 变 长 

(4) 仅 选 择 内 容 所 需 的 字符 (如 图 13.7.4 
所 示 ) ， 这 也 会 影响 文件 的 大 小 。 

(5) 将 link 元 素 代 码 (如 图 13.7.5 所 示 ) 
复制 到 你 的 网 页 的 head 中 去 ( 如 图 13.7.6 所 示 )。 

(6) 在 font-family 中 使 用 Google Fonts 
提供 的 名 称 ， 便 可 以 对 文本 应 用 字体 样式 。 
对 font-weight 使 用 第 (3) 步 选 择 的 一 种 粗细 
版 本 ( 如 图 13.7.7 所 示 ) 。 如 果 使 用 了 一 种 
斜体 的 Web 字体 ， 则 在 CSS 样式 规则 中 设置 
@font-style: italic;, 








2. Choose the character sets yoy want; 


“ Latin tlatin) Cyrillic Extended (cyrillic-ext) 
| | Greek Extended (greek-ext) [ | Greek (greek) 
IVietnamese (vietnamese) 


[Latin Extended (latin-ext) (Cyrillic (cyrillic) 








13.7.4 ”你 的 内 容 所 需 的 字符 对 应 的 字体 子 集 。 
默认 为 Latin 


Standard 他 import 
3. Add this code to your website: 


Javascript 


<link href='http://fonts.googleapis .com/css?family=Lat 





13.7.5 复制 Standard (标准 ) 标签 下 的 link 代码 


《!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Le Journal</title> 
<link href="http://fonts.googleapis. 
com/css?family=Lato:300|0pen+ 
Sans:700”Tel="stylesheet” /> 
<link rel="stylesheet" href="style.css" /> 
</head> 
<body> 


<h1>9unny East Garden at the Getty Villax</h1> 


<p>It is hard to believe, but there are 
about...</p> 


<h2>Popular Posts</h2> 


</body> 
</htm]> 





13.7.6 ”将 Google Fonts 提供 的 link 代码 粘贴 
到 我 自己 的 样式 表 ( style.css ) 的 Link 的 前 面 。 注 意 ， 
Google Fonts 提供 的 Link 中 的 href 值 包含 了 我 之 
前 选择 的 字体 名 称 和 粗细 版 本 ( 参见 图 13.7.2 和 
图 13.7.3 ) 。 这 样 就 会 加 载 所 有 的 Web 字体 文件 以 
及 使 用 它们 所 需 的 @font-face 样式 规则 
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(7) 保存 HTML 页 面 和 样式 表 。 
在 浏览 器 中 查看 页 面 (如 图 13.7.8 所 示 ) ， 
可 以 看 到 Web 字体 已 经 生效 了 。 


body { 
font: 100%/1.2 Georgia, Times New Roman ， 
serif; 


} 


h1 { 


color: #333; 

font-family: ‘Lato', sans-serif; 
font-size: 3.25em; /* 52px/16px */ 
font-weight: 300; 

letter-spacing: -2px; 

line-height: .975; 

margin-bottom: .4125em; 


} 


h2 { 
border-bottom: 1px solid #dbdbdb; 
font-family: "Open Sans ， 

sans-serif; 
font-size: .875em; /* 15px/16px */ 
font-weight: 700; 
text-transform: uppercase; 
padding-bottom: .75em; 

} 


us 本 页 面 的 更 多 C5S i 





4. Integrate the fonts into your GSS: 


The Google Fonts AP| will generate the necessary 
browser-specific CSS to use the fonts. Al|l you need to do 
is add the font name to your CSS styles, For example: 


Eont=£amily: "Lats", Sans=aerde: 


font-£amily: Open Sans' , 9ans-aerir; 














13.7.7 Google Fonts (下 ) 显示 了 引用 字体 的 
方法 。 我 对 hd 元 素 应 用 了 粗细 为 300 的 Lato 字体 ， 
对 h2 元 素 应 用 了 粗细 为 700 的 Open Sans 字体 。 

这 些 font-weight 数值 与 link 元 素 中 的 数字 (参见 
图 13.7.6 ) 是 对 应 的 ， 而 link 元 素 中 的 数字 则 与 
我 所 选 的 粗细 版 本 (参见 图 13.7.3 ) 对 应 。 这 里 显 
示 的 其 他 CSS 并 不 是 让 Web 字体 生效 的 必要 代码 
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SunNnNy East Garden at 
the Getty Villa 


lt is hard to believe, but there are about 300 varieties of plants at 
the East Garden at the Getty, making the experience truly 
Po 016 [hy = H CS De T7109 es 1 二 上 至 





POPULAR POSTS 


The City Named After Queen 
Victoria » 





图 13.7.8 ”大 标题 是 Lato 字体 ， 小 一 些 的 粗 体 则 
是 Open Sans 字体 


如 果 你 想 对 斜体 文本 应 用 字体 样式 ， 

一 定 要 确保 在 选择 Web 字体 样式 和 粗细 版 本 
时 (第 (3) 步 ) 选择 斜体 版 本 ， 并 在 定义 CSS 
时 (第 (6) 步 ) 指定 了 正确 的 font-weight 值 
以 及 font-style: italic。 否 则 就 会 显示 伪 斜 
体 。 类 似 地 ， 如 果 不 引 入 字体 的 粗 体 版 本 ， 

浏览 器 就 会 显示 伪 粗 体 。 更 多 示例 与 讨论 参 
见 13.6 予以 及 10.4 节 和 10.5 节 。 
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使 用 CSS3 进行 增强 


本 章 内 容 

口 浏览 姨 兼 窑 性 、 渐 进 增强 和 polyfill 
D 理解 厂商 前 级 

口 为 元 素 创 建 圆 角 

口 为 文本 添加 阴影 

口 为 其 他 元 素 添 加 阴影 
口 应 用 多 重 背 景 

口 使 用 渐变 背景 

口 为 元 素 设 置 不 透明 度 
口 生成 内 容 的 效果 

口 使 用 sprite 拼合 图 像 














网 站 制作 者 多 年 来 面临 的 挑战 之 一 就 是 ， 
使 用 CSS 建立 丰富 布局 的 选择 是 很 有 限 的 。 
在 大 多 数 情 况 下 ， 要 建立 丰富 的 布局 ， 就 需要 
使 用 额外 的 HTML、CSS 及 大 量 图 像 。 这 样 
做 的 结果 就 是 ， 页 面 变 得 更 为 复杂 ， 可 访问 性 
降低 ， 浏 览 需 需要 花 更 长 的 时 间 下 载 和 显示 页 
面 ， 同 时 ， 页 面 变 得 更 为 脆弱 ， 更 难 维护 。 

近年 来 ， 浏 览 需 快速 吸纳 了 很 多 新 的 
CSS3 属性 ， 让 上 述 情况 有 了 改观 。 如 今 ， 仅 
使 用 CSS 创建 圆 角 、 渐 变 和 阴影 以 及 调整 透 
明度 等 已 经 变 成 现实 。 你 在 本 章 将 看 到 如 何 
实现 这 些 效果 ， 以 及 如 何 应 对 不 支持 这 些 特 
性 的 旧 浏 览 器 。 

这 样 做 的 结果 是 网 页 可 以 使 用 更 少 的 标 
记 和 图 像 ， 这 样 加 载 的 速度 也 会 变 快 。 这 对 




















所 有 的 用 户 来 说 都 有 好 处 ， 尤 其 是 对 使 用 处 
理 能 力 较 低 的 设备 《如 智能 手机 ) 的 用 户 。 


浏览 器 羔 容 性 、 淘 进 增强 
和 polyfil 

由 于 浏览 硕 发 展 的 脚步 在 近 几 年 明显 地 
加 快 了 了， 因此 理解 这 些 新 的 CSS 属性 在 什么 
时 候 会 得 到 预期 的 效 采 就 很 重要 了 。 这 里 给 
出 了 浏览 妖 对 本 曹 将 要 介绍 到 的 属性 开始 提 
供 基本 文 持 的 时 间 ， 如 图 14.1.1 所 示 。 


OEQO® 


border-radius 3.0 9.0 1.0 3.1 10.5 


14.1 





box-shadow ww 9.0 1.0 3.1 10.5 
text-shadow 3.3 10.0 1.0 .| > 


多 重 背 景 3.6 9.0 1.0 3.1 10.5 
渐变 3.6 10.0 2.0 40 11.1 
透明 度 1.0 9.0 1.0 3.1 9.0 


before 和 :after L.A) 8.0 1.0 3 9.0 


图 14.1.1 这 个 表格 仅 列 出 了 和 票面 浏览 希 ， 不 过 也 
不 要 忽视 移动 浏览 锅 ， 移 动 浏览 需 的 份额 每 天 都 在 
快速 地 增长 。 关 于 移动 浏览 需 的 信息 ， 以 及 果 面 浏 
览 器 的 更 多 人 信息， 参见 Alexis Deveria 的 Can I Use 
网 站 (www.caniuse.com ) ， 该 表 中 的 大 部 分 信息 
都 来 自 这 个 网 站 。 还 有 一 份 更 为 简洁 的 文 持 性 总 结 
位 于 http://fmbip.conylitmus/ 
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这 里 列 出 的 大 部 分 浏览 句 版 本 都 有 些 年 
代 了 ， 只 有 IE8 仍然 占据 了 较 高 的 份额 。 截 
至 本 书写 作 之 际 ，IE8 在 全 球 的 市 场 份额 大 约 
为 85%， 并 处 于 不 断 下 请 的 态势 。IE8 的 用 
户 无 法 体验 本 章 列 举 的 大 部 分 特性 ， 不 过 你 








将 看 到 ， 这 没关系 。 
1. 渐进 增强 


你 在 前 面 已 经 多 次 听 我 提 到 渐进 增强 了 ， 
自 次 提 到 这 个 词 是 在 本 书 的 前 言 。 人 简单 说 来 ， 
它 强 调 创 建 所 有 用 户 都 能 访问 (无论 使 用 什 
么 样 的 web 浏览 锅 ) 的 基本 层面 的 内 容 和 
功能 ， ee 增强 的 体 
验 。 更 简单 一 些 ， 激 进 增强 意味 着 网 站 在 不 
同 Web 浏览 硕 中 的 外 观 和 行为 不 一 样 是 完全 
可 以 接受 的 ， 只 要 内 容 是 可 访问 的 。 

Dribbble 网 站 (http://dribbble.com ) 就 
是 渐进 增强 的 一 个 实例 ， 如 图 14.1.2 所 示 。 
通过 渐进 增强 ， 该 网 站 使 用 CSS3 为 现代 浏 
览 亏 提供 更 丰富 的 体验 。 在 旧 的 浏览 器 〈 如 
Internet Explorer 8 ) 中 ， 该 网 站 呈现 出 稍微 不 
同 的 视觉 体验 ， 但 功能 并 未 削减 ， 如 图 14.1.3 
所 未 。 
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图 14.1.2 Dribbble 网 站 使 用 了 一 些 CSS3 属性 (如 
border-radius 和 box-shadow ) 为 使 用 现代 浏览 器 
的 用 户 提 供 更 为 丰富 的 体验 ， 同 时 ， 人 
能 较 弱 的 浏览 器 着 想 ， 参 见 图 14.1.3 
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图 14.1.3 在 不 支持 border-radius 或 box-shadow 
的 旧 浏 览 絮 ( 如 Internet Explorer 8 ) 中 查看 该 网 站 ， 

体验 就 会 发 生 改 变 。 下 拉 菜 单 中 各 项 的 渐 阴 影 不 见 
本 ， 贺 角 变 成 直角 了 ， 但 功能 并 未 损失 ， 一 切 照 党 
工作 。 这 是 渐进 增强 在 实践 中 的 一 个 方面 


本 章 稍 后 为 大 家 介绍 如 何 对 About Me 应 
用 渐变 和 阴影 ， 如 图 14.1.4 所 示 。IE8 显示 的 
是 没有 阴影 的 纯色 背景 ,但 内 容 依旧 清晰 易 读 。 
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图 14.1.4 ” 左 图 为 现代 浏览 器 中 显示 的 效果 ， 奢 图 
为 IE8 及 其 他 旧 浏览 器 中 呈现 的 简化 版 本 


2. 为 不 支持 某 些 属性 的 浏览 器 使 用 polyfil| 
如 果 你 想 弥合 较 弱 的 浏览 句 与 较 强 的 浏 
览 需 之 间 的 功能 差异 ， 可 以 使 用 polyfill ( 通 
第 又 称 垫 片 ， 
polyfill 通常 使 用 JavaScript 实现 ， 它 可 
以 为 较 弱 的 浏览 硕 提 供 一 定 程度 的 对 HTML5 
和 CSS3 的 API 和 属性 的 支持 ， 同 时 ， 当 浏览 


shim ) 。 
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希 本 刁 就 具有 相应 的 能 力 时 ， 会 不 动 声色 地 
退 而 使 用 官方 的 文 择 。 需 要 注意 的 是 ， 这 样 
做 通常 会 对 性 能 产生 一 定 的 负面 影响 ， 因 为 
较 弱 的 Web 浏览 妖 (尤其 是 旧版 本 的 Internet 
Explorer ) 运行 JavaScript 的 速度 要 慢 得 多 。 

关于 IE,Jason Johnston 的 CSS3 PIE( http:// 
css3pie.com ) 是 一 种 最 为 常见 的 polyfil1”。 
它 为 Internet Explorer 6 ~ 9 提供 了 本 章 讨论 
的 大 部 分 CSS 效 末 的 文 持 。( 其 中 ，IE9 仅 
需要 PIE 提供 对 线性 渐变 的 文 持 ;对 于 其 他 
的 效果 ，IE9 提供 原生 的 文 持 。 ) 


HTML5 Please (http://htmlSplease. 
com ) 是 一 个 不 错 的 资源 ， 使 用 它 可 以 找 出 哪 
些 HTMLS 和 CSS3 可 以 放心 使 用 ， 以 及 有 哪 
些 好 的 填补 差距 的 polyfill。 











提 示 | 
是 一 个 JavaScript 库 ， 它 允许 你 探测 浏览 器 
是 否 支 持 创 建 优化 的 网 站 体验 所 需 的 特定 的 
HTML5、CSS3 及 其 他 的 特性 。 


Modernizr (www.modernizr.com ) 


更 多 的 CSS3 效果 

相 比 这 些 页 面 中 应 用 的 效果 ，CSS3 能 
够 实现 的 效果 要 多 很 多 ， 如 变换 、 过 渡 、 
动画 等 类 别 。 例如， 我 们 可 以 创建 滑 过 链 
接 时 渐变 的 效果 : 

a { /* 简单 起 见 ， 省 略 了 前 缓 */ 


color: #007c21; 
transition: color .4s ease; 


a:hover { color: #00bf32; } 


要 想 找到 学 习 更 多 内 容 的 链接 ， 参 见 


www.htmlcssvgs.com/resources/。 





14.2 ”理解 厂商 前 缀 


CSS3 规范 要 达到 W3C 的 推荐 标准 ( 即 
定稿 ) 状态 要 经 过 数 年 。 浏 览 吉 则 通常 在 
W3C 开发 标准 的 过 程 中 就 会 提前 实现 这 些 特 
性 。 这 样 ， 标 准 在 最 终 敲 定之 前 就 能 知道 哪 
些 地 方 还 能 进一步 改进 。 

在 包含 某 个 特性 的 初始 阶段 ， 浏 览 需 
通常 会 使 用 厂商 前 级 实现 这 类 特性 ， 参 见 
图 14.2.1。 这 样 ， 每 个 浏览 妖 都 可 以 引入 自己 
的 CSS 属性 支持 方式 ， 从 而 可 以 获取 反馈 ， 
而 且 一 旦 标准 发 生 改 变 也 不 会 造成 影响 。 





div { 
-webkit-border-radius: 10px; 


border-radius: 10px; 





14.2.1 使 用 border-radius 属性 的 示例 。 该 属 
性 需要 使 用 -webkit 前 缀 支持 旧版 本 的 Android、 
iOS 和 Safari 浏览 希 。 这 些 浏览 硕 的 一 些 新 版 本 
已 经 不 需要 使 用 市 前 缀 的 属性 了 ， 而 只 需 使 用 
无 前 组 的 属性 就 行 了 (简单 写成 border-Tadius: 
10px; ) 。 照 例 ， 样 式 规则 中 的 最 后 一 条 声明 优先 
级 最 高 ， 这 也 是 将 无 前 缀 版 本 放 在 最 后 的 原因 

不 过 , 这 种 方式 会 造成 一 定 程度 的 混乱 ， 
因此 很 多 浏览 硕 都 逐渐 取消 了 广 商 前 绥 的 使 
用 。 不 过 ， 正 如 你 在 本 草 看 到 的 ， 还 有 一 些 
地 方 需 要 使 用 它们 ， 至 少 在 依赖 它们 的 旧 浏 
览 囊 依然 占据 一 定 市 场 份额 的 时 候 是 这 样 。 

每 个 主流 浏 览 硕 都 有 其 目 身 的 前 组 : 
-webkit-〈 Webkit/Safari/ 旧版 本 的 Chrome ) 、 
-moz- (Firefox ) 、-ms- (Internet Explorer ) 、 
-0-( Opera ) 。 应 该 将 前 级 放 在 CSS 属性 名 
的 前 面 ,参见 图 14.2.1。 如 今 ,在 多 数 情 况 下 ， 
我 们 一 般 只 需要 -webkit 前 级 。 






































J polyfill 用 于 项 补 上 日 浏览 喜与 新 的 Web 技术 之 间 的 差异 。 一 一 译 者 注 
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并 非 所 有 的 CSS3 属性 都 需要 使 用 
为 浏览 器 准备 的 前 级 ， 如 text-shadow 和 
opacity (本章 稍 后 就 会 介绍 ) 。 


网 上 有 一 些 创 建 CSS3 代 码 ( 包括 
厂商 前 级 ) 的 工具 ， 参 见 图 14.2.2。CSS3， 
Please! 列 出 了 哪些 浏览 器 支持 无 前 级 的 语法 ， 

哪些 需要 前 级 。 这 对 决定 是 否 使 用 前 级 这 一 
问题 来 说 是 非常 有 用 的 一 一 你 可 以 自行 决定 一 
部 分 浏览 器 不 显示 CSS3 效 果 是 不 是 可 接受 的 。 





CSS3 Generator 


Border Radius 


Top Lef: Me 
Top Right: 
BottomRight: 2p 


Bottorm Le 全 


Preview Area 











14.2.2 Randy Jensen 的 CSS3 Generator ( www. 
css3generator.com ) ， 以 及 Paul Irish 和 Jonathan Neal 
的 CSS3, Please! ( css3please.com ) 可 以 让 你 避免 书 
写 带 前 级 和 不 带 前 级 的 CSS 属性 这 种 重复 劳动 。 像 
LESS、Sass 和 Stylus 这 样 的 CSS 预 处 理 融 处 理 这 
个 问题 会 更 方便 。 关 于 其 他 厂商 前 级 的 信息 ， 参 见 
http://css-tricks.com/how-to-dealwith-vendor-prefixes/ 
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14.3 ”为 元 素 创 建 圆 角 


使 用 CSS3， 可 以 在 不 引入 额外 的 标记 或 
图 像 的 情况 下 ， 为 大 多 数 元 素 〈 包 括 表单 元 率 、 
图 像 , 甚至 段落 文本 ) 创建 融 角 ， 如 图 14.3.1 ~ 
图 14.3.5 所 示 。 








<body> 
<div class="all-corners"></div> 
<«div class="one-corner"></div> 


<div class="elliptical-corners"></div> 
<div class="circle"></div> 

</body> 

</html> 





14.3.1 这 个 文档 包含 class 属性 的 示例 
div, 每 个 div 均 用 于 演示 border-radius 的 不 同 语法 ， 
包括 创建 相同 的 四 个 圆 角 ,使 用 长 形式 语法 创建 单 
独 的 辆 角 ， 创 建 椭圆 形 圆 角 以 及 创建 加 形 等 图 形 


background: #999; 
float: left; 
height: 150px; 
margin: 10px; 
width: 150px; 

} 


.all-corners { 
-webkit-border-radius: 20px; 
border-radius: 20px; 


} 


.oNne-corner { 
-webkit-border-top-left-radius: 
75pX; 
border-top-left-radius: 75px; 
} 


.elliptical-corners { 
-webkit-border-radius: 50px / 20px; 
border-radius: 50px / 20px; 


} 


.Circle { 
-webkit-border-radius: 50%; 
border-radius: 50%; 





14.3.2 ”使 用 CSS 圆 角 的 四 个 例子 ， 包 含 了 必要 
的 厂商 前 级 以 支持 旧版 Android、Mobile Safari 和 Safari 
浏览 舌 。 对 于 .circle, 使 用 75px 与 50% 的 效果 是 一 
样 的 ， 因 为 该 元 素 的 大 小 为 150 像素 x 150 像素 
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14.3.3 支持 border-radius 属性 (包括 有 前 组 
的 和 无 前 级 的 ) 的 浏览 大 会 以 图 中 所 示 eh 


例 呈 现 出 来 。 注 意 ， 不同 的 实现 之 间 可 能 存在 视觉 
上 的 差异 , 尤其 是 在 旧版 本 的 Safari 和 Firefox 中 ， 
差异 更 为 明显 


.about { 
background-color: #2b2b2b; 
border-radius: 10pX; 
padding: .3125em .625em .625em; 


.about img { 
border: 5px solid #bebebe; 
border-radius: 15px; 


14.3.4 ”这 是 一 个 真实 的 例子 ， 对 本 书 之 前 创 
建 的 我 们 熟悉 的 About Me 模板 应 用 圆 角 样式 ( 如 
图 14.3.5 所 示 ) 。 注 意图 像 的 样式 规则 中 组 合 使 用 
了 border 和 border-radius 


同 border、margin 和 padding 属性 一 样 ， 
border-radius 属性 也 有 长 短 两 种 形式 的 语法 ， 
参见 图 14.3.6 和 图 14.3.7。 只 有 当 你 想 在 旧版 
本 的 Android、Mobile Safari 和 Safari 浏览 天 
中 显示 相应 效果 的 时 候 才 使 用 -webkit 前 级 。 
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14.3.5 外围 的 圆 角 比 图 像 的 15 像素 圆 角 半 径 
更 小 一 些 。 在 旧 浏 览 絮 中 ， 这 两 个 地 方 都 显示 为 直 
角 ， 就 像 第 11 章 和 第 12 章 中 显示 的 那样 


div { 
background: #ff6; 
border: 5px solid #326795; 


lL 


.example-1 { 
/* 将 左上 方 和 右 下 方圆 角 半 径 设 为 10pXx， 右 
上 方 和 左下 方圆 角 半 径 设 为 20px */ 
border-radius: 10px 20px; 


} 


.example-2 { 
/* 将 左上 方圆 角 半 径 设 为 20pX， 其 他 圆 角 半 
径 设 为 0 */ 
border-radius: 20px 0 0; 


} 


.example-3 { 
/* 将 左上 方圆 角 半 径 设 为 10pXx， 右 上 方圆 角 
半径 设 为 20px， 右 下 方圆 角 半 径 设 为 0， 左 
下 方圆 角 半 径 设 为 30px */ 
border-radius: 10px 20px 0 30pX; 





14.3.6 ”更 多 使 用 简 记 法 设置 一 个 或 多 个 圆 角 
的 例子 ， 使 用 简 记 法 就 不 必 书 写 border-top-left- 
radius 这 样 的 属性 了 。 价 短 起 见 ， 这 里 省 略 了 
-webkit- 前 组 
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14.3.7 ”使 用 长 语法 设置 的 圆 角 样式 


1. 为 元 素 创 建 四 个 相同 的 圆 角 

(1) 这 一 步 可 选 ， 输 入 -webkit-border- 
radius: z， 这 里 的 上 是 圆 角 的 半径 大 小 ， 表 
示 为 长 度 〈 市 单位 ) 。 

(2) 输入 border-radius: r+， 这 里 的 r+ 是 
出 角 的 半径 大 小 , 使 用 与 第 (1) 步 中 相同 的 值 ， 
参见 图 14.3.2。 这 是 该 属性 的 标准 短 形式 语法 。 


2. 为 元 素 创建 一 个 辆 角 

(1) 这 一 步 可 选 ， 输 入 -webkit-border- 
top-left-radius: 工 ， 这 里 的 工 是 左上 方圆 角 
的 半径 大 小 ， 表 示 为 长 度 ( 禹 单位 ) 。 

(2) 输 入 border-top-left-radius: 7， 
这 里 的 > 使 用 与 第 () 步 中 相同 的 值 ， 参 见 
图 14.3.2。 这 是 该 属性 的 标准 长 形式 语法 。 

注意 这 些 步 又 仅 演 示 了 如 何 创建 左上 方 
圆 角 , 此 外 , 还 可 以 单独 创建 其 他 方位 的 圆 角 ， 
步 桑 如下。 

口 创建 右上 方圆 角 : 用 top-right 替换 

第 (1) 步 和 第 (2) 步 中 的 top-left。 
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口 创建 右 下 方圆 角 : 用 bottom-right 替 
换 第 (1) 步 和 第 (2) 步 中 的 top-left。 

口 创建 左下 方圆 角 : 用 bottom-left 蔡 
换 第 (1) 步 和 第 (2) 步 中 的 top-left。 


3. 创建 椭圆 形 圆 角 

(1) 这 一 步 可 选 ， 输 入 -webkit-border- 
radius: xX 人 YY， 其 中 x 是 圆 角 在 水 平方 向上 的 
半径 大 小 ,是 圆 角 在 垂直 方向 上 的 半径 大 小 ， 
均 表 示 为 长 度 ( 市 单位 ) 。 

(2) 输入 border-radius: 
y 跟 第 (1) 步 中 的 信 相 等 ， 


4. 使 用 border-radius 创建 圆 形 

(1) 输入 -webkit-border-radius: rr， 这 
里 的 r 是 元 素 的 半径 大 小 (市 长 度 单位 ) 。 
要 创建 圆 形 ， 可 以 使 用 短 形式 的 语法 , 了 的 值 
应 该 等 于 元 系 高 度 或 宽度 的 一 半 。 

(2) 输入 border-radius: +， 这 里 的 rf 是 
元 系 的 半径 大 小 ( 和 帘 长 度 单位 ) ， 跟 第 (1) 步 











x/y， 其 中 x 和 
参见 图 14.3.2。 











中 的 fr 相等， 参见 图 14.3.3。 这 是 标准 的 无 前 
级 语法 。 

不 支持 border-radius 的 旧 的 浏览 器 
仅 会 以 方 角 呈 现 元 素 。 

border-radius 仅 影 响 施 加 该 样式 的 


元 素 的 角 ， 不 会 影响 其 子 元 素 的 角 。 因 此 ， 

enn 
示 在 一 个 或 多 个 父 元 素 的 角 的 位 置 ， 从 而 影 

响 圆 角 样 式 。 


有 时 元 素 的 背景 (这 里 讲 的 不 是 子 元 
Pp 会 透 过 其 圆 角 。 为 了 避免 这 种 情况 ， 
可 以 在 元 素 的 border-radius 声明 后 面 增加 一 


条 样式 规则 : background-clip: padding-box;。 
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图 14.3.4、 图 14.3.5 和 图 14.3.7 展示 
了 如 何 结合 使 用 border 和 border-radius， 


border-radius 属性 不 是 继承 的 。 


14.4 ”为 文本 添加 阴影 


最 早 ，text-shadow 是 CSS2 规范 的 一 
部 分 ， 接 着 在 CSS2.1 中 被 移 除 了 ， 后 来 在 
CSS3 中 又 出 现 了 。 使 用 该 元 素 ， 可 以 在 不 
使 用 图 像 表示 文本 的 情况 下 ， 为 段落 、 标 题 
等 元 素 中 的 文本 添加 动态 的 阴影 效果 ( 参见 
图 14.4.1 ~ 图 14.4.4)。 














<body> 


<p class="basic">Basic Shadow</p> 

<p class="basic-negative">Basic Shadow</p> 

<p class="blur">Blur Radius</p> 

<p class="blur-inversed">Blur Radius</p> 

<p class="multiple">Multiple Text Shadows</p> 


</body> 
</html> 





14.4.1 演示 text-shadow 用 法 的 段落 名 和 类 名 

1. 为 元 素 的 文本 添加 阴影 

(1) 输入 text-shadow:。 

(2) 分 别 输入 表示 x-offset (水平 偏 移 
量 )、y-offset( 懂 直 偏 移 量 )、blur-radius( 模 
糊 半径 ) 和 color 的 值 ( 前 三 个 值 刘 长 度 单位 ， 
四 个 信之 间 不 用 去 号 分 隔 ) ， 例 如 -2px 3px 
7px #999 (关于 允许 输入 的 值 ， 参 见 提 示 ) 。 


2. 为 元 素 的 文本 添加 多 重 阴 影 
(1) 输入 text-shadow: 。 
(2) 分 别 输 入 x-offset、y-offset、blur- 





radius 和 color 的 值 (前 三 个 带 长 度 单位 ， 
四 个 值 之 间 不 用 逗号 分 隔 ) 。blur-radius 的 
值 是 可 选 的 。 

(3) 输入，( 逗号 ) 。 

(4) 对 四 种 属性 使 用 不 同 的 值 重复 第 2) 步 。 


pi 
COlor: #222; /* 接近 黑色 */ 
font-size: 4.5em; 
font-weight: bold; 


} 


.basic { 
text-shadow: 3px 3px #aaa; 


} 


.basic-negative { /* 负 偏 移 值 */ 
text-shadow: -4px -2px #ccc; 


} 


.blur { 
text-shadow: 2px 2px 10px grey; 


上 


.blur-inversed { 
color: white; 
text-shadow: 2px 2px 10px #000; 


} 


.multiple { 
text-shadow: 


2px 2px white, 
6px 6px rgba(50,50,50,.25); 





14.4.2 这些 类 演示 了 几 种 text-shadow 的 效果 。 
第 一 个 、 第 二 个 和 第 五 个 都 省 略 了 模糊 半径 的 值 。 
.multiple 类 告诉 我 们 ， 可 以 为 单个 元 素 添 加 多 个 
阴影 样式 ， 每 组 属性 之 间 用 逗号 分 隔 。 这 样 ， 通 过 
结合 使 用 多 个 阴影 样式 ， 可 以 创建 出 特殊 而 有 趣 的 
效果 








3. 将 text-shadow 改 回 默认 值 
输入 text-shadow: none;。 


text-shadow 属性 不 需要 使 用 厂商 前 缓 。 
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@Ag Text Shadow 
器 Text Shadow 





Basic Shadow 


Basic Shadow 
Blur Radius 
SF rtrelins 


Multiple Text 
Shadows 





14.4.3 ”第 一 个 段落 有 正 的 偏 移 量 ， 第 二 个 有 人 负 
的 偏 移 量 。( 偏 移 量 的 两 个 值 并 不 需要 同时 为 正 或 
同时 为 负 。 ) 这 两 个 段落 都 没有 模糊 半径 ， 但 第 三 
个 和 第 四 个 有 。 第 四 个 有 反 色 的 效果 ， 这 是 将 文本 
颜色 设 为 白色 的 结果 (参见 图 14.4.2 ) 。 最 后 一 个 
有 两 个 文本 阴影 ， 不 过 你 还 可 以 添加 更 多 的 阴影 


Create Account 








14.4.4 ”使 用 了 text-shadow 和 box-shadow ( 将 
在 下 一 市 介绍 ) 的 标题 和 第 16 章 将 要 介绍 的 表单 
按钮 。 代 码 位 于 www.htmlcssvgs.com/8ed/16 


text-shadow 属性 接受 四 个 值 : 带 长 度 
单位 的 Xx-offset、 带 长 度 单位 的 y-offset、 可 
选 的 带 长 度 单位 的 blur-radius 以 及 color 值 。 
如 果 不 指 定 blur-radius， 将 假定 其 值 为 0 
(图 14.4.2 中 有 三 个 这 样 的 例子 ) 。 
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x-offset 和 y-offset 值 可 以 是 正 整 
数 ， 也 可 以 是 负 整 数 ， 也 就 是 说 ，1px 和 -1px 
都 是 有 效 的 。blur-radius 值 必 须 是 正 整 数 。 
这 三 个 值 都 可 以 为 0。 


颜色 可 以 表示 为 十 六 进 制 数 、RGB、 
RGBA 或 HSLA 值 (参见 7.5 节 的 “CSS 颜色 ”)。 


尽管 text-shadow 的 语法 与 边框 和 背 
景 属性 的 语法 是 类 似 的 ， 但 它 不 能 像 边框 和 
背景 那样 单独 地 指定 四 个 属性 值 。 


如 果 不 对 text-shadow 的 值 进 行 设置 ， 
它 就 会 使 用 初始 值 none。 


text-shadow 属性 是 继承 的 。 
14.5 “为 其 他 元 素 添加 阴影 


使 用 text-shadow 属性 可 以 为 元 素 的 文 
本 添加 阴影 ， 使 用 box-shadow 属性 则 可 以 为 
元 素 本 映 添 加 阴影 ， 参 见 图 14.5.1 ~ 图 14.5.6 
所 示 。 它 们 的 基础 属性 集 是 相同 的 ， 不 过 
box-shadow 还 允许 使 用 两 个 可 选 的 属性 一 一 
inset 关键 字 属 性 和 spread 属性 〈 用 于 扩张 
或 收缩 阴影 ) 。 

box-shadow 属性 与 text-shadow 属性 的 另 
一 个 区 别 是 ， 如 有 果 你 而 望 兼容 旧版 Android、 
Mobile Safari 和 Safari 浏览 项 ， 那 么 box- 
shadow 需要 加 上 -webkit- 厂商 前 级 。 关 于 
这 方面 内 容 的 最 新 信息 参见 http://caniuse. 
comy/#search=box-shadow。 开 发 人 员 可 以 目 行 
决定 是 否 省 略 该 前 绥 。 

box-shadow 属性 接受 六 个 值 ， 带 长 度 单 
位 的 x-offset 和 y-offset、 可 选 的 带 长 度 单 
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位 的 blur-radius、 可 选 的 inset 关键 字 、 可 jiv 1 

选 的 市 长 度 单 位 的 spread 值 及 color 值 。 如 background: #fff; 
果 不 指定 blur-radius 和 spread 的 值 ， 则 设 ) 人 

为 0。 


.Shadow { 
-webkit-box-shadow: 4px 4px 5px #999; 
“ box-shadow: 4px 4px 5px #999; 
<body> 
<div class= Shadow > 
<p>Shadow with Blur</p> 
</div> 


} 


.Shadow-negative { 
-webkit-box-shadow: -4px -4px 5px 
#999) 
<div class="shadow-negative"> box-shadow: -4px -4px 5px #999; 
<p>Shadow with Negative Offsets and 


Blur</p> 


} 


</div> .Shadow-spread { 
-webkit-box-shadow: 4px 4px 5px 3px 
#999) 


box-shadow: 4px 4px 5px 3px #999; 


<div class="shadow-spread"> 
<p>Shadow with Blur and Spread</p> 
</div> } 
.Shadow-offsets-0 { 
-webkit-box-shadow: 0 0 9px 3px #999; 
box-shadow: 0 0 9px 3px #999); 


<«div class="shadow-offsets-0"> 
<p>Shadow with Offsets Zero, Blur, and 
Spread</p> 
</div> } 
<djiv class="inset-shadow"> 
<p>Inset Shadow</p> 
</div> 


.inset-shadow { 
-webkit-box-shadow: 2px 2px 10px #666 
inset; 
box-shadow: 2px 2px 10px #666 
inset; 


} 


<div class="multiple"> 
<p>Multiple Shadows</p> 

</div> 

</body> 

</html> 


.multiple { 
-webkit-box-shadow: 
| 2px 2px 10px rgba(255,0,0,.75), 
14.5.1 这 个 文档 包含 六 个 div， 它 们 用 于 演示 5px 5px 20px blue; 
使 用 box-shadow 添加 一 个 或 多 个 阴影 的 效果 








box-shadow: 
2px 2px 10px rgba(255,0,0,.75), 
5px 5px 20px blue; 





14.5.2 ”前 五 个 类 各 目 应 用 了 一 个 彼此 不 同 的 
阴影 样式 。 最 后 一 个 类 应 用 了 两 个 阴影 (还 可 以 
应 用 更 多 个 阴影 ) 。 不 理解 box-shadow 的 浏览 需 
会 直接 忽略 这 些 CSS 样式 规则 ， 呈 现 没 有 阴影 的 
页 面 
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Shadow with | Shadow with 


Blur Negative 
Offsets and 
| Blur 


Shadow with 
Offsets Zero, 
Blur and 
Spread 


Shadow with 
Blur and 
Spread 


Inset Multiple 
Shadow Shadows 





14.5.3 ”六 个 示例 在 支持 box-shadow 属性 的 浏 
览 器 中 显示 的 样子 


Shadow with 
Blur and 
Negative 
Spread 





14.5.4 这 个 元 系 的 样式 为 box-shadow: 0 20px 
10px -11px #999;。 负 的 spread 值 会 让 阴影 在 元 素 
内 进行 收缩 。 为 0 的 x-offset 值 意味 着 阴影 不 会 
问 左 或 癌 右 偏离 该 元 素 














.about { 
border: 1px solid #dododo; 
-webkit-box-shadow: 0 0 3px #dododo; 


box-shadow: 0 0 3px #dododo; 
padding: 0.313em 0.625em 0.625em; 


图 14.5.5 这 是 一 个 真实 的 例子 ， 即 第 11 章 和 
第 12 章 的 About Me 模块 。 我 将 两 个 偏 移 量 都 设 为 
0， 因 此 两 个 微小 的 阴影 会 出 现在 四 个 边 上 
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ABOUT ME 


My name is Eleina Shinn. Exploring the 
Unknown and learning about our planet is What 
brings me the most pleasure. I enjoy foreign 
cuisine, culture and discovering social design 
and architecture, During the last five years I 
traveled to over 20 countries on 4 continents, 
often with just my backpack and a map in hand. 





14.5.6 ”About Me 模块 有 了 一 种 新 的 样式 。 这 
时 ， 它 有 一 个 1 像 系 的 边框 ， 四 个 边 上 都 有 一 个 微 
小 的 阴影 ( 深 色 的 背景 色 被 默认 的 日 色 取 代 了 了 ) 





1. 为 元 素 添加 阴影 

(1) 输入 -webkit-box-shadow: 。 

(2) 分 别 输入 表示 x-offset、y-offset、 
blur-radius 、spread 和 color 的 值 〈 前 四 个 值 
均 带 长 度 单位 ) ， 例 如 2px 2px 3px 5px #333。 

(3) 输入 box-shadow: ， 再 重复 第 (2) 步 。 





2. 创建 内 阴影 

(1) 输入 -webkit-box-shadow: 。 

(2) 分 别 输入 表示 x-offset、y-offset、 
blur-radius、spread 和 color 的 值 (前 四 个 
值 均 市 长 度 单 位 ) ， 例 如 2px 2px 5px #333。 

(3) 在 冒号 后 输入 inset， 再 输入 一 个 空 
格 (也 可 以 在 第 (2) 步 之 前 输入 inset 和 一 个 
空格 ) 。 

(4) 输入 box-shadow: ， 再 重复 第 (2) 步 和 
第 (3) 步 。 


3. 为 元 素 应 用 多 重 阴 影 
(1) 输入 -webkit-box-shadow: 。 
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(2) 分 别 输入 表示 x-offset、y-offset、 
blur-radius、spread 和 color 的 值 (前 四 个 
值 均 市 长 度 单 位 ) ， 例 如 2px 2px 5px #333。 
如 采 有 必要 可 以 将 inset 关键 字 包 含 在 内 。 

(3) 输 入， (如 号)。 

(4) 对 每 种 属性 使 用 不 同 的 值 重 复 第 (2) 步 。 

(5) 输入 box-shadow: ， 再 重复 第 (2) 步 至 
第 (4) 步 。 





4. 将 box-shadow 改 回 默认 值 
(1) 输 入 -webkit-box-shadow: none;。 
(2) 输入 box-shadow: none;。 


EC x-offset、y-offset 和 spread 值 可 以 
是 正 整 数 ， 也 可 以 是 负 整 数 ， 也 就 是 说 ，1px 
和 -1px 都 是 有 效 的 。blur-radius 值 必须 是 正 
整数 。 这 三 个 值 都 可 以 为 0。 


可 以 使 用 负 的 spread 值 ， 让 整个 阴影 


比 应 用 样式 的 元 素 小 一 些 (如 图 14.5.4 所 示 ) 。 


颜色 可 以 表示 为 十 六 进 制 数 、RGB、 


RGBA 或 HSLA 值 (参见 7.5 节 的 “CSS 颜色 ”)。 


守业 日 如 采 不 设置 属性 值 ， 则 使 用 默认 值 


none 


inset 关 键 字 可 以 让 阴影 位 于 元 素 内 部 。 


”box-shadow 属性 是 不 继承 的 。 


14.6 ”应 用 多 重 背 景 


为 单个 HTML 元 素 指 定 多 个 背景 是 CSS3 
引入 的 一 个 特性 ( 如 图 14.6.1、 图 14.6.2 和 
图 14.6.3 所 示 ) 。 通 过 减少 对 某 些 元 率 的 需 











求 ( 这 类 元 素 存 在 只 是 为 了 用 CSS 添加 和 额 
外 的 图 像 背 景 ) ， 指 定 多 重 硼 景 便 可 以 简化 
HTML 代码 ， 并 让 它 容易 理解 和 维护 。 多 重 
背景 几乎 可 以 应 用 于 任何 元 素 。 





<body> 
<div class= night-sky > 


<h1>In the night sky.../h1> 
</div> 
</body> 
</html> 





14.6.1 
多 香 背 太 


为 class="night-sky" 的 单个 div 应 用 


.night-sky { 
background-color: navy; /* 备用 */ 
background-image: 
url(ufo.png), url(stars.png), 
url(stars.png), url(sky.png); 


background-position: 
50% 102%, 100% -150pX， 
0 -150px, 50% 100%; 


background-repeat: 
no-repeat, no-repeat, 
no-repeat, repeat-x; 


height: 300px; 
margin: 0 auto; 
padding-top: 36px; 
width: 75%; 





图 14.6.2 首先， 为 使 用 旧 浏 览 硕 的 用 户 定 义 
background-color。 这 一 步 是 可 选 的 ， 但 建议 添加 ， 
从 而 保证 内 容 的 可 访问 性 。 然 后 定义 加 载 和 定位 背 
景 图 像 的 属性 ， 说 明 背 景 图 像 如 何 重复 





1. 为 单个 元 素 应 用 多 重 背 景 图 像 

(1) 输入 background-color: bp， 这 里 的 
b 是 希望 为 元 双 应 用 的 备用 背景 颜色 (人 参见 
图 14.6.4 ) 。 
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(2) 输入 background-image: /4， 这 里 的 4 
是 绝对 或 相对 路 径 图 像 引 用 的 URL 列表 (用 


去 吕 分 隔 ) 。 





Pp 


Multiple Backgrounds 








Multiple Backgrounds 


14.6.3 ” 文 持 多 重 育 景 的 浏览 硕 显 示 示 例 的 样 
子 。 其 中 ， 图 像 是 分 层次 相互 重合 在 一 起 的 ， 用 去 
写 分 隅 的 列表 中 的 第 一 个 图 像 位 于 顶部 。 为 见 彩 插 








GO . ls [x [a we P 


并 eatin (yg Multiple Backgrounds ”~ 国 r 已 嘿 





In the night sky... 








时 Internet | Protected Mode: On 


14.6.4 ”IE8 及 不 文 持 多 重 背 景 图 像 语法 的 浏览 





髓 会 将 background-color 属性 指定 的 背景 显示 为 备 
用 背景 颜色 
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(3) 输入 background-position: p， 这 里 
的 p 是 成 对 的 x-offset 和 y-offset (可 以 是 
正 的 ， 也 可 以 是 负 的 ; 市 长 度 单位 或 者 关键 
字 ， 如 center top ) 的 集合 ， 用 逗号 分 隔 。 
对 于 第 (2) 步 中 指定 的 每 个 URL， 都 应 有 一 
组 x-offset 和 y-offset 。 

(4) 输入 background-repeat: Zr， 这 里 的 
r 是 repeat-x、repeat-y 或 no-repeat 值 ， 用 

辟 分 隔 ， 第 (2) 步 中 指定 的 每 个 URL 对 应 

= Es 


关于 前 面 各 步 中 列 出 的 属性 的 更 多 信 
息 参 见 10.10 节 。 

















对 于 多 重 背 景 图 像 ， 可 以 使 用 标准 的 
短 形 有 即使 用 各 号 分 隔 每 组 背景 参数 ， 
参见 图 14.6.5。 这 种 表示 方法 的 好 处 是 开发 者 
既 可 以 指定 备用 背景 颜色 ， 也 可 以 为 旧 浏 览 
器 指定 图 像 ， 参 见 图 14.6.6。 


指定 多 重 背 景 不 需要 使 用 厂商 前 级 。 


.night-sky { 

/* 备用 颜色 和 图 像 */ 

background: navy url(ufo.png) no-repeat 
center bottom; 


background: 


url(ufo.png) no-repeat 50% 102%， 
url(stars.png) no-repeat 100% -150px, 
url(stars.png) no-repeat 0 -150px, 
url(sky.png) repeat-x 50% 100%; 








图 14.6.5 ”这 与 图 14.6.2 的 代码 几乎 是 相同 的 ， 只 
是 使 用 了 简 记 法 ， 而 且 为 IE8 及 其 他 旧 浏 览 器 同时 
提供 了 背景 闫 色 和 背景 图 像 ( 如 图 14.6.6 所 示 ) 。 

对 于 支持 这 些 属性 的 浏览 器 ， 显 示 效 果 与 图 14.6.6 
所 示 的 相同 
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区 Multiple Backgrounds via Shorthand Notation - Windows Intemet Expl | 上 器 | 2 | 
< 下 网 | 好 xX | 加 Bing } 
3 


需 Favorites |@® Multiple Backgrounds Vi. | | 从 ~ rT 





In the night sky... 


< 


六 Internet | Protected Mode: On 





fa 了 丽 100% ~ 








14.6.6 ”有 旧 浏览 器 现在 可 以 显示 比 图 14.6.4 更 好 


的 效果 


14.7 ”使 用 渐变 背景 


渐变 背景 也 是 CSS3 中 的 新 特性 ， 通 过 
它 可 以 在 不 使 用 图 像 的 情况 下 创建 从 一 种 颜 
色 到 为 一 种 颜色 的 过 渡 (参见 图 14.7.1 至 
图 14.7.11 ) 。 


<body> 
<div class="vertical-down"><p>default</p> 
» 《</div> 
<div Class= vertical-up ><p>to top</p></div> 


<div class="horizontal-rt"><p>to right</p> 
=» 《</div> 


。 某 类 div 的 其 余 代 码 ... 
</body> 
</html> 


14.7.1 这 是 所 有 CSS 渐变 示例 (除了 图 14.7.10 
和 图 14.7.11 ) 用 到 的 HIML。 它 包含 了 一 系列 
div, 每 个 div 都 有 一 个 用 于 应 用 渐变 样式 的 类 名 。 
(需要 说 明 的 是 ， 新 变 可 以 用 于 大 多 数 元 素 ， 并 不 
仅 限 于 div。 ) 这 个 页 面 的 完整 版 本 可 见 本 书 配套 
网 站 





.Vertical-down { /* 默认 */ 
background: silver; /* 备用 */ 
background: linear-gradient(silver, black); 


} 


.vertical-up { 

background: silver; 
background: linear-gradient(to top, 
> silver, black); 


default 


图 14.7.2 ”CSS 渐变 是 一 个 痛 景 图 像 ， 因 此 ， 用 在 
这 里 以 及 其 他 地 方 的 属性 既 可 以 是 background 简 
记 法 ， 也 可 以 是 background-image。 应 该 始终 包含 
一 个 为 上 日 浏览 喜 准 备 的 基准 background 定义 ， 并 
放置 在 渐变 背景 的 定义 之 前 。 默 认 情 况 下 ， 线 性 渐 
变 是 从 上 往 下 渐变 的 ， 因 此 在 属性 值 中 不 需要 指 
定 to _ bottom。 如 果 要 使 用 相反 的 方向 ， 则 使 用 to 
top。 渐 变 会 依照 指定 的 方向 从 银灰 色 渐 变 为 黑色 








.horizontal-rt { 
background: silver; 
background: linear-gradient(to right, 
—» silver, black); 


} 


.horizontal-lt { 
background: silver; 
background: linear-gradient(to left, 
=» silver, black); 


to right 














14.7.3 ”指定 水 平 渐变 为 由 左 向 右 渐变 还 是 由 右 


问 左 渐变 
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.diagonal-bot-rt { 
background: aqua; 
background: linear-gradient(to bottom 
> right, aqua, navy); 


} 


.diagonal-bot-lt { 
background: aqua; 
background: linear-gradient(to bottom 
> 1left, aqua, navy); 


} 


.diagonal-top-rt { 
background: aqua; 
background: linear-gradient(to top 
> right, aqua, navy); 


} 


.diagonal-top-lt { 
background: aqua; 
background: linear-gradient(to top left, 
> aqua, navy); 





to to 
bottom right bottom left 


to top right 


to top left 


图 14.7.4 有 两 种 指定 渐变 方向 角度 的 方式 。 第 一 
种 方式 就 是 这 里 所 示 的 ， 使 用 关键 字 指 定 渐变 方 问 
需要 旋转 的 角度 。 渐 变 会 从 跟 指 定 角 相对 的 角 ( 对 
角 线 另 一 端的 角 ) 开始 。 男 见 彩 插 

使 用 CSS 创建 渐变 有 两 种 主要 的 方 
式 : 线性 渐变 (人 参见 图 14.7.2 至 图 14.7.5、 
图 14.7.10 和 图 14.7.11 ) 和 径 回 渐变 (人 参见 
图 14.7.6 至 网 14.7.8 ) ， 每 种 方式 都 有 不 同 的 
必 选 参数 和 可 选 参 数 。 除 非 指 定 一 种 颜色 问 
另 一 种 颜色 过 渡 的 位 置 ， 否 则 浏览 器 会 自行 
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决定 不 同 颜色 之 间 的 过 渡 (参见 图 14.7.9 ) 。 


.angle-120deg { 
background: aqua; 
background: linear-gradient(120deg, 
> aqua, navy); 


} 


.angle-290deg { 
background: aqua; 
background: linear-gradient(290deg, 


下 aqua，navy); 





图 14.7.5 ”使 用 关键 字 (参见 图 14.7.4 ) 只 能 创建 
沿 对 角 线 方向 的 渐变 。 第 二 种 方式 是 指定 渐变 角度 
的 度数 ， 如 90deg( 90 度 ) 。 数 值 代表 的 是 圆周 上 
的 点 的 位 置 0 代表 最 顶端 的 点 ,90 代 表 最 左边 的 点 ， 
180 代表 最 底 端 的 点 ，270 代表 最 右边 的 点 。 你 列 
出 的 值 决 定 的 是 渐变 结束 的 点 的 位 置 。 因 此 ，0deg 
等 价 于 to top，90deg 等 价 于 to right, 以 此 类 推 。 

为 见 彩 插 

CSS 渐变 的 语法 在 相关 规范 的 修订 过 程 
中 一 直 在 变化 。 目 前 的 语法 是 稳定 的 ， 但 不 
筠 的 是 仍 有 几 个 浏览 硕 使 用 较 旧 的 语法 。 因 
此 ， 为 了 广泛 文 持 现 有 的 浏览 硕 ， 还 需要 使 
用 大 量 的 〈 甚 至 可 以 说 是 党 珊 的 ) 市 有 广 商 
前 缀 的 代 但 〈 如 图 14.7.12 所 示 ) 。 

了 解 这 一 点 后 ， 为 了 降低 学 习 难 度 ， 一 
开始 我 们 将 仅 演 示 正 确 的 、 无 前 级 的 属性 。 
本 节 的 提示 提供 了 一 些 额 外 信息 ， 可 供 下 载 
的 本 章 代码 中 包含 了 完整 的 示例 (包括 之 厂 
商 前 级 的 属性 ) 。 

根据 渐进 增强 的 原则 ， 最 好 为 不 文 持 至 
景 渐变 属性 的 浏览 大 提供 一 个 备用 选项 。 在 
CSS 中 ， 它 可 以 位 于 背景 渐变 规则 的 前 面 ， 
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参见 图 1472 图 14.7.10。 


.radial-center { /* 默认 */ 
background: red; 
background: radial-gradient(yellow, red); 


} 
.radial-top { 


background: red; 
background: radial-gradient(at top, 
=» yellow, red); 


default 


14.7.6 包含 额外 的 可 选 参数 的 径 回 渐变 。 最 简 
单 的 例子 是 默认 的 样式 规则 ， 它 使 用 的 参数 与 线性 
渐变 是 一 样 的 。 在 这 个 例子 中 ， 渐 变 的 原点 是 元 素 
的 中 心 。 可 以 使 用 at top 这 样 的 关键 字 指 定 中 心 
的 位 置 。 跟 往常 一 样 ， 可 以 在 径 向 渐变 声明 之 前 为 
较 旧 的 浏览 大 提供 一 个 背景 的 定义 。 另 见 彩 搬 











.radial-size-1 { 
background: red; 
background: radial-gradient(100px 50pX， 
=» yellow, red); 

} 

.radial-size-2 { 
background: red; 
background: radial-gradient(70% 90% at 
下 bottom left, yellow, red); 


70% 90% at 
bottorm [1 


100pXx@50px 





14.7.7 还 可 以 控制 渐变 的 尺寸 。 这 里 展示 了 儿 
个 例子 。 男 见 彩 插 





.radial-various-1 { 
background: red; 
background: radial-gradient(closest-side 
at 70px 60px, yellow, lime, red); 


} 
.radial-various-2 { 
background: Ted; 
background: radial-gradient(30px 30px 
at 65% 70%, yellow, lime, red); 


variGus 1 various 2 





14.7.8 这 些 例子 结合 了 几 个 参数 。 它 们 都 有 三 
个 颜色 。 位 于 at 后 面 的 值 指 定 的 是 新 变 的 中 心 坐 
标 。 在 第 二 个 例子 中 ,30px 30px 标 记 了 渐变 的 尺寸 。 
在 第 一 个 例子 中 , closest-side 决 定 了 渐变 的 尺寸 ， 
它 告诉 浏览 絮 从 中 心 (指定 为 at 70px 60px ) 回 包 
含 该 渐变 的 区 域 的 最 近 的 一 边 伸展 。 另 见 彩 搬 








.Color-stops-1 { 
background: green; 
background: linear-gradient(yellow 10%, 
» green); 


.CoOlor-stops-2 { 
background: green; 
background: linear-gradient(to top right, 
» yellow, green 70%, blue); 


to top right, 
yellow, 
green 70%, 
blue 


WA 
green 





14.7.9 可 以 使 用 百分数 指定 一 个 以 上 的 颜色 停 
止 位 置 。 男 见 彩 插 
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1. 创建 备用 背景 颜色 

输入 background: color 或 者 background- 
color: color， 这 里 的 color 可 以 是 十 六 进 制 
数 、RGB 值 以 及 其 他 任何 文 持 的 颜色 名 称 ， 
另外 也 可 以 使 用 图 像 。 最 好 不 要 将 RGBA、 
HSL 或 HSLA 值 作为 备用 背景 颜色 ， 因 为 
IE8 及 以 前 的 版 本 不 文 持 。 


2. 定义 线性 渐变 

(1) 输 入 background: linear-gradient(。 

(2) 如 采 你 希望 渐变 的 方 回 是 从 上 往 下 

(默认 方向 ) ， 则 跳 过 这 一 步 。 

输入 方向 后 面 加 一 个 人 逗 咏 ， 这 里 的 方 
回 指 的 是 to top、to right、to left、 
to bottom Tight、to bottom left、 to top 
right 或 to top left 这 样 的 值 。 

或 者 输入 方向 后 面 加 一 个 逗号 ， 这 里 
的 方向 指 的 是 角度 值 ( 如 45deg、107deg、 
180deg 或 310deg ) 。 

(3) 根据 后 面 讲 到 的 “指定 颜色 ”或 “ 指 
定 颜色 和 颜色 的 停止 位 置 ”, 定义 渐变 的 颜色 。 

(4) 输入 ) 完成 渐变 。 


3. 定义 径 向 渐变 

(1) 输 入 background: radial-gradient(。 

(2) 指定 渐变 的 形状 。 如 果 你 希望 渐变 的 
形状 根据 第 (3) 步 中 指定 的 尺寸 自行 确定 ， 则 
跳 过 这 一 步 。 否 则 ,输入 circle 或 ellipse。( 注 
意 这 一 声明 在 某 些 情况 下 会 被 忽略 。 ) 

(3) 指定 渐变 的 尺寸 。 如 果 你 希望 渐变 的 
尺寸 为 自动 指定 的 值 ( 默认 值 为 farthest- 
corner ， 最 远 的 角 ) ， 则 跳 过 这 一 步 。 

输入 size， 这 里 的 size 可 以 是 同时 代表 
渐变 宽度 和 高 度 的 一 个 长 度 什 (如 200px 或 
7em ) , 也 可 以 是 代表 宽度 和 高 度 的 一 对 信 ( 如 
390px 175px 或 60% 85% ) 。 注 意 ， 如 果 只 使 
用 一 个 什 ， 则 这 个 值 不 能 是 百分数 。 
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或 者 输入 size， 这 里 的 size 是 closest- 
side、farthest-side、closest-corner 或 
farthest-corner。 这 些 关 键 字 代 表 相 对 于 浙 
屎 的 中 心 ， 渐 变 可 以 伸展 到 多 大 的 空间 。 边 
界 决定 了 渐变 的 尺寸 。 

(4) 指定 渐变 的 位 置 。 如 采 你 希望 渐变 从 
元 素 的 中 心 开 始 (默认 值 ) ， 则 跳 过 这 一 步 。 

输入 pos， 这 里 的 pos 是 at top、at 
right、 at left、 at bottom right、 at bottom 
left、at top Tight 或 at top left 等 表示 浙 
变 中 心 位 置 的 值 。 

或 者 输入 pos， 这 里 的 pos 是 表示 渐变 中 
心 位 置 的 一 对 坐标 ， 并 以 at 开 涉 。 例 如 at 
200px 43px、at 33% 70%、at 50% -10px 等 。 

( 仅 指 定 一 对 。 ) 

(5) 如 末 指 定 了 第 (2) 步 至 第 (4) 步 中 的 任 
何 一 步 ， 输 入 一 个 逗号 。 需 要 说 明 的 是 ， 如 
条 指定 了 这 些 步 又 中 的 多 个 仁 ， 这 些 信 之 间 
不 需要 以 逗号 分 隔 。 

(6) 根据 后 面 讲 到 的 “指定 颜色 ”或 “ 指 
定 颜色 和 颜色 的 停止 位 置 ”, 定义 渐变 的 颜色 。 

(7) 输入 ); 完成 渐变 。 


4. 指定 颜色 

输入 至 少 两 种 颜色 ， 每 个 颜色 之 间 用 运 
号 分 隔 。 指 定 的 第 一 个 颜色 出 现在 新 变 的 开 
始 位 置 ， 最 后 一 个 颜色 出 现在 渐变 的 结束 位 
置 。 对 于 径 回 渐变， 它们 分 别 为 最 里 边 的 颜 
色 和 最 外 边 的 颜色 。 

颜色 值 可 以 是 十 六 进 制 数 、RGB、 
RGBA 、HSL 或 HSLA 值 的 组 合 。 除 非 指 定 
一 种 颜色 癌 男 一 种 颜色 过 渡 的 位 置 ， 否 则 浏 
毁 需 会 日 行 决定 不 同 颜色 之 间 的 过 流 。 

5. 指定 颜色 和 颜色 的 停止 位 置 

根据 “指定 颜色 ”中 的 说 明 进 行 操 
作 。 如 有 果 需 要 ， 对 每 个 颜色 什 指 定 一 个 百 分 
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数 以 控制 颜色 出 现在 渐变 中 的 位 置 (参见 
图 14.7.9 ) 。 这 个 值 可 以 是 负数 ， 也 可 以 是 大 
于 100% 的 数 。 


.about { 
/# 备用 */ 
background-color: #ededed; 


background-image: 


> linear-gradient(#fff, #ededed); 
border: 1px solid #dodod0; 
-webkit-box-shadow: 0 0 3px #d0d0do0; 
box-shadow: 0 0 3px #dodod0; 

padding: 0.313em 0.625em 0.625em; 


图 14.7.10 ”我 们 为 曾经 用 过 的 About Me 模块 添 
加 了 新 样式 ， 会 是 什么 样子 呢 ? 可 以 注意 到 ， 这 里 
用 background-image 代替 了 background 简 记 法 ( 结 
果 是 完全 一 样 的 ) 


ABOUT ME 


My name 13 Eleina Shinn. Exploring the 
unknown and learning about our planet is what 
brings me the most pleasure. |] enjoy toreign 
cuisine; culture and discovering social design 
and architecture, During the last tive years I 
traveled to over 20 countries on 4 eontinents, 
often with just my backpack and a map in hand. 








图 14.7.11 现在 它 在 先前 添加 的 阴影 和 边框 样式 
的 基础 上 ， 又 有 了 一 个 简单 的 线性 渐变 





.vertical-down { 
background: silver; 


/* Chrome 10-25, i0OS 5+, Safari 5.1+ */ 
background: -webkit-linear-gradient 
; (top, silver, black); 


/* Firefox 3.6-15 */ 
background: -moz-linear-gradient 
; (top, silver, black); 


/* Opera 11.10-12.00 */ 
background: -o-linear-gradient 
; (top, silver, black); 


/* 标准 语法 ， 支 持 浏览 器 : 
Chrome 26+, Firefox 16+, IE 10+， 
» Opera 12.10+ 
+ 
background: linear-gradient(silver, 
» black); 





图 14.7.12 噢 ! 这 是 让 图 14.7.2 中 的 渐变 样式 规 
则 在 各 种 支持 该 样式 的 浏览 姨 里 都 能 正常 工作 所 
需要 的 代码 。 这 里 没有 包含 针对 Safari 4 ~ 5 和 
Chrome 10 之 前 版 本 的 声明 ， 如 果 加 上 它们 ， 代 码 
就 更 长 了 。 大 部 分 这 样 的 代码 都 可 以 通过 CSS3， 
Please! ( www.css3please.com ) 生成 ( 同时 生成 关 
于 浏览 需 文 持 情 况 的 注释 ) 

















6. 为 旧版 浏览 器 创建 渐变 代码 

先前 我 曾 指 出 ， 要 让 渐变 可 以 在 各 种 支 
持 它 的 浏览 絮 上 都 能 正常 显示 ， 哪 怕 是 最 简 
单 的 渐变 ， 都 需要 一 大 推 代码 。 现 在 你 可 以 
看 看 这 些 代码 (如 图 14.7.12 所 示 ) 。 没 有 人 
愿意 手写 这 么 多 代码 ， 哪 人 知道 怎么 写 。 幸 
好 有 很 多 工具 可 以 帮 我 们 做 这 个 工作 (参见 
提示 ) 。 

好 的 方面 是 ， 大 多 数 需 要 厂商 前 级 的 浏 
览 融 过 一 段 时 间 〈 不 用 太 久 ) 就 会 因为 太 旧 
而 无 需 再 为 其 添加 额外 的 代码 。 
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简单 起 见 ， 在 大 多 数 示例 中 我 都 使 用 
了 颜色 关键 字 。 和 你 可 以 根据 自己 

的 偏好 使 用 十 六 进 制 数 或 其 他 的 颜色 值 。 

关于 对 最 新 浏览 器 的 支持 情况 ， 参 见 


http:/canliuse.com/#search=gradient。 


渐变 具有 很 强 的 通用 性 。 可 以 为 一 
re 多 个 渐变 ， 每 个 定义 之 间 使 用 


六 


过 与 分 隔 。 通 过 定义 多 个 渐变 ， 可 以 创造 
出 很 多 有 趣 的 效果 。 不 妨 访问 Lea Verou 的 
CSS3 Patterns Gallery (http://lea.verou.me/ 
css3patterns/ ) 看 看 有 哪些 有 趣 的 效果 。 


可 以 使 用 Microsoft 提供 的 CSS 渐变 
背景 制作 器 (http:Wie.microsoft.comy/testdrive/ 
graphics/cssgradientbackseroundmaker/) 这 样 
的 可 视 化 工具 替代 繁琐 的 代码 编写 工作 。 
这 个 工具 还 可 以 帮 你 创建 全 部 的 厂商 前 组 
属性 ， 让 渐变 获得 最 大 程度 的 浏览 器 支持 。 
ColorZilla 的 渐变 生成 器 (http://colorzilla.com/ 
gradient-editor/ ) 也 是 类 似 的 ， 但 需要 注意 的 
是 通常 它 生成 的 代码 要 比 实际 需要 的 多 得 多 。 


可 以 通过 指定 background-color 或 
er image 为 不 支持 渐变 的 浏览 器 提供 
后 备 方案 ， 不 过 要 记 住 的 是 ， 无 论 浏览 器 是 
否 使 用 CSS 中 的 图 像 , 这些 图 像 都 会 被 下 载 。 


14.8 ”为 元 素 设 置 不 透明 度 


使 用 opacity 属性 可 以 修改 元 素 ( 包括 图 
像 ) 的 透明 度 ， 如 图 14.8.1 ~ 图 14.8.5 所 示 。 


修改 元 素 不 透明 度 的 方法 
输入 opacity: o， 这 里 的 o 表示 元 素 的 
不 透明 程度 ( 两 位 小 数 ， 不 市 单位 ) 。 
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<body> 


<div class="box'"> 
<img src="img/sleeves.jpg" width="420" 
> height="296" alt="Record sleeves” /> 
</div> 


</body> 
</html> 








14.8.1 这 个 文档 包含 一 个 div， 其 中 有 一 个 图 像 


Opacity default 


14.8.2 ”这 是 图 14.8.1 中 div 的 默认 样式 。 同 
其 他 元 素 一 样 ， 浏 览 融 为 其 设置 的 默认 样式 为 
opacity: 1; (不 需要 在 样式 表 中 指定 ) 。 该 div 
有 一 个 黑色 的 背景 ， 由 于 该 元 素 有 内 边 距 ， 因 此 篆 
景 会 显示 出 来 。body 的 背景 为 褐色 。 另 见 彩 搬 











.body { 
background: #a2735f; /* brown */ 


} 


.box { 


background: #000; /* black */ 
opacity: .5; 

padding: 20px; 

width: 420px; 





图 14.8.3 将 opacity 设 为 小 于 1 的 值 可 以 让 元 么 
及 其 子 元 素 变 成 半 透 明 的 样子 。 在 这 个 例子 中 ， 不 
透明 度 被 设 为 S0% 或 0.5， 小 数 点 前 的 0 是 可 选 的 
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Opacity at .5 


14.8.4 这 是 示例 中 div 元 素 的 opacity 设 为 
0.5( 即 不 透明 度 为 50% ) 时 的 样子 。 注 意 div 元 
率 的 黑色 背景 现在 呈现 为 次 褐色 ， 图 像 也 变 成 半 透 
明 的 ， 且 带 有 一 些 褐色 的 色彩 。 如 果 将 某 元 素 的 
opacity 设 为 小 于 1 的 值 ， 包 含 它 的 周边 元 系 就 会 
透 出 来 。 在 这 个 例子 中 ， 透 出 来 的 是 body 的 褐色 
背景 。 如 果 将 body 的 背景 设 为 红色 ， 歼 果 会 更 明 
显 (参见 图 14.8.5 ) 。 另 见 彩 捕 





Opacity at .5 


图 14.8.5 “示例 中 div 仍 设 为 opacity: .5;， 但 
body 改 为 background-color: Ted;。 通 透 的 程度 取 
决 于 不 透明 度 。 如 果 将 不 透明 度 设 为 0.35， 就 会 
透 出 更 多 的 红色 ; 如 果 设 为 0.8， 则 透 出 的 红色 就 
更 少 。 男 见 彩 插 








div { 
-ms-filter: progid:DXImageTransform. 
— Microsoft.Alpha(opacity=50); 


filter: alpha(opacity=50); 
opacity; 5; 
zoom: 1; 








14.8.6 ”这 是 针对 旧版 IE 应 用 正 专 有 滤 镑 设置 
不 透明 度 的 代码 。zoom: 1; 也 是 正 专 有 的 ， 该 语 
名 也 是 用 来 实现 效果 的 一 部 分 。 现 代 浏 览 需 仍 会 使 
用 opacity: .5; 的 设置 。 注 意 下 滤 镜 使 用 的 是 不 
同 的 数字 。 在 这 个 例子 中 ， 使 用 50 代替 0.5， 表 示 
50% 的 不 透明 度 








opacity 的 默认 值 为 1， 参见 图 14.8.2。 
该 属性 值 可 以 使 用 0.00 (完全 透明 ) 至 1.00 
完全 不 透明 ) 之 间 的 两 位 小 数 。 例 如 ， 
opacity:.09;、opacity: .2; 或 者 opacity: 
.75;。 小 数 点 前 后 的 0 可 有 可 无 ， 如 0.00 可 

以 二 作 0，1.00 可 以 写作 1。 


文本 也 会 受 不 透明 度 的 影响 。 如 
果 div 中 有 白色 文本 (只 是 打 个 比方 )， 
图 14.8.4 中 的 文字 会 带 有 一 定 程度 的 棕色 ， 
图 14.8.5 中 的 文字 会 带 有 一 定 程度 的 红色 。 


通过 使 用 opacity 属性 和 :hovet 伪 
属性 ， 可 以 产生 一 些 有 趣 且 实用 的 效果 。 例 
如 ，img { opacity: .75; } 默认 情况 下 可 以 
将 图 像 设 置 为 75% 的 不 透明 度 ，img:hover { 
opacity: 1; } 可 导致 用 户 和 鼠标 停留 在 元 素 上 
时 元 素 变 为 不 透明 。 在 将 缩 略 图 链接 到 全 尺 
寸 版 本 时 经 常 看 到 这 种 效果 。 对 于 访问 者 来 
说 ， 是 浮 可 增强 图 像 的 动感 。 
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opacity 属性 与 使 用 RGBA 或 HSLA 
设置 的 alpha 透明 背 丸 色 是 两 个 容易 混 消 的 
概念 。 如 图 14.8.4 和 图 14.8.5 所 示 ，opacity 
影响 的 是 整个 元 素 ( 包 括 其 内 容 ) ， 而 
background-color: rgba(128,0,64,.6); 这 样 
的 设置 仅 影 响 背 最 的 透明 度 。 参见 7.5 节 “CSS 
颜色 ”中 关于 RGBA 的 示例 。 


Internet Explorer 9 之 前 的 版 本 并 不 原 
生 支 持 opacity 属性 ， 但 对 于 它们 ， 可 以 使 用 
专 有 的 滤 镜 效应 ， 参 见 图 14.9.6。 确 保 不 要 在 
页 面 中 过 多 使 用 这 类 滤 镜 ， 因 为 它们 会 反 过 
来 影响 浏览 器 的 性 能 。 


无 论 显 示 成 什么 样子 ，opacity 必 
性 并 不 是 继承 的 。opacity 的 值 小 于 1 的 元 
素 的 子 元 素 也 会 受到 影响 ， 但 这 些 子 元 素 的 
opacity 值 仍 为 1。 


14.9 生成 内 容 的 效果 


使 用 :before 和 :after 伪 元 素 可 以 很 方 
册 1 面 添加 一 些 令 人 难以 置信 的 设计 效 
果 。 它 们 可 以 与 content 属性 结合 使 用 ， 从 而 
创建 所 谓 的 生成 内 容 ( generated content ) 。 
生成 内 容 指 的 是 通过 CSS 创建 的 内 容 ， 而 不 
是 由 HTML 生成 的 。 

不 要 误解 ， 生 成 内 容 并 不 是 为 页 面 
添加 段落 或 标题 。 这 些 内 容 还 是 应 该 交 给 
HTML。 使 用 生成 内 容 可 以 添加 和 从 号 ( 如 
图 14.9.1 至 图 14.9.4 所 示 ) ， 创 建 用 于 添加 
样式 的 空 内 容 元 素 ( 如 图 14.9.5 至 图 14.9.8 
所 示 ), 还 可 以 做 很 多 其 他 的 事情 ( 参见 提示 )。 

我 本 可 以 在 第 一 个 例子 的 HTML ( 参见 
图 14.9.1 ) 中 包含 箭头 , 但 这 些 箭头 属于 样式 ， 
以 后 有 可 能 发 生 改 变 。 如 果 需 要 更 改 样式 ， 
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只 需要 修改 .more 类 (参见 图 14.9.2 ) 即 可 ， 
而 不 需要 改动 可 能 数 以 百 计 的 HTML 页 面 。 


<pThis area is one of the most tranquil 
» Spaces at the Villa. As I wandered around, 
» enjoying shade provided by sycamore and 
» laurel trees and serenaded by splashing 


”Water from two sculptural fountains, 

»] couldn't help but think &hellip; 

<a href="victoria.html" class="more"> 
> Read More</a></p> 








一 个 市 类 的 链 


图 14.9.1 一 个 简单 的 段落 ， 其 中 有 一 
接 。 注 意 Read Wi 的 后 面 没有 两 个 荫 > 





、- 后 自 Without Generated Content 
于 Without Generated Content 





This area is one of the most tranquil spaces atthe Villa. As I 
wandered around, enjoying shade provided by sycamore and 
laurel trees and serenaded by splashing water from two 
sculptural fountains, I couldn't help but think ... Read More 





14.9.2 使 用 基本 CSS 文本 样式 的 段落 。 链 接 
后 面 没 有 箭头 


.more:after { 
content: ™ »"; 
} 
14.9.3 ”发 挥 魔力 的 地 方 





With Generated Content 
With Generated Content 





This area is one of the most trangui] spaces at the Villa. As I 


wandered around, enjoying shade provided by sycamore and 
laurel trees and serenaded by splashing water from two 
sculptural fountains, I couldn't help but think ... Read More > 





14.9.4 ”现在 ， 带 有 class="more" 的 元 素 会 在 
其 后 显示 一 个 双 箭 头 
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<div class="travels"> 
<h2>My Travels</h2> 
<img src="img/map.jpg" class="map" 
‘tabindex= 0 人 


<UL Class=' cities clearfix"> 
《Li>Victoria</1iy> 
<li>Los Angeles</1i> 
<li>Mexico City</1i> 
<1i>Buenos Aires</1i> 
<1i>Paris</1i> 
<1i>Kampala</1i> 
<1li>Lagos</1i> 
<1i>Cairo</1i> 
<1i>Beijing</1i> 

</U]> 

</div> 








14.9.5 ”这 个 城市 列表 会 显示 为 底部 这 有 稍 头 标 
记 的 方形 气泡 

第 二 个 例子 使 用 content:"“"; 创建 了 一 
个 空格 ， 并 使 用 CSS 边框 创建 了 一 个 三 角形 
样式 ， 如 图 14.9.6 所 示 ( 参见 提示 ) 。 可 以 
对 生成 内 容 添 加 背景 颜色 、 背 景 图 像 ( 包括 
渐变 ) 、 宽 度 、 高 度 、 圆 角 等 样式 。 














ED 完整 的 示例 代码 位 于 www.htmlcssvgs. 
com/8ed/14/gencon。 


可 以 对 单个 元 素 同 时 应 用 :before 和 
:after， 从 而 建立 两 个 可 供 施 加 样式 的 额外 容 
器 。 例如， 可 以 应 用 一 种 不 同 于 14.6 市 所 介 
绍 的 多 重 背 景 效果 。Chris Coyier 演示 了 使 用 
:before 和 :after 的 更 多 神奇 用 法 (http://css- 


tricks.com/pseudo-element-roundup/ ) 。 


Joel Glover 深入 讨论 了 如 何 使 用 边框 
样式 创建 三 角形 ， 参 见 http://appendto.com/ 
blog/2013/03/pure-css-triangles-explained/, 





.travels { 
/* 让 位 于 其 中 的 .cities 可 以 使 用 绝对 定位 */ 
position: relative; 


} 


.map:focus + .cities, 
.map:hover + .cities { 

left: 50%; /* 显示 */ 
} 


~ 

.Cities { 
background: #2B2B2B; 
border-radius: 5px 5px; 
left: -999em; /* 隐藏 */ 
margin-left: -111px; 
padding: .5em 0 .9375em .9375em; 
position: absolute; 
top: -75pX; 
width: 222px; 


} 


放 汽 冯 平 的 和 月 浓 和 
.Cities:after { 
border: solid transparent; 
border-top-color: #2b2b2b; 
border-width: 15px; 
content: " "; /* 空格 */ 
height: 0; 
left: 50%; 
margin-left: -15px; 
position: absolute; 
top: 99.9%; 
width: 0; 


图 14.9.6 ”这 些 代 码 会 产生 一 些 效 果 。 最 后 一 条 规 
则 使 用 :after 伪 元 素 创建 一 个 三 角形 并 定位 于 城 
市 列表 的 下 方 。 第 三 条 规则 让 列表 在 默认 情况 下 位 
于 屏幕 之 外 。 第 二 条 规则 让 列表 在 访问 者 与 地 图 交 
互 的 时 候 显示 出 来 (如 图 14.9.7 和 图 14.9.8 所 示 ) 。 
它 是 绝对 定位 的 ， 不 过 是 相对 于 在 HTML 中 包含 
它 的 .travels div 的 (参见 图 14.9.5 ) 














Simon Hgjberg 的 CSS Arrow Please! 
( http://cssarrowplease.com/ ) 是 一 个 帮 你 创建 
CSS 三 角形 代码 的 工具 。 
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SSAA Cenerated Content Triangle 


5 第 11 章 演 示 的 .clearfix 类 就 使 用 了 
Generated Content Triangle , 
UULISUIG, CULUUTE Hl UISCOVELINE SOC UGMEL | 下 成 内 人 
and arehitecture, During the last five years I 
traveled to over 20 countries on 4 continents, 
ofte and， 


i 14.10 使 用 sprite 拼合 图 像 
。Paris » Kampala 
Re 浏览 器 通常 很 快 就 可 以 将 文本 显示 出 
来 ， 但 图 像 往往 会 减 慢 页 面 的 加 载 速度 。 这 
一 现象 在 移动 设备 上 尤为 明显 。 为 了 解决 这 
一 问题 ， 可 以 将 多 个 图 像 拼 合成 单个 背景 图 
像 (sprite ) ， 上 再 通过 CSS 控制 具体 显示 图 
像 的 哪 一 部 分 。 其 中 的 秘密 就 是 background- 











position 属性 。 
14.9.7 气泡 底部 的 箭头 是 纯 CSS， 不 是 图 像 ne 
当 鼠 标 移 到 地 图 的 任何 位 置 ， 城 市 气泡 就 会 显示 出 。” 见 第 15 章 ) 。 我 们 的 目标 是 在 每 个 文档 链接 前 
来 。 不 过 ， 这 还 不 是 全 部 …… 面 显 示 一 个 来 自 图 14.10.2 所 示 的 sprite 的 图 标 。 


@ee Cenerated Content Triangle 


i Generated Content Triangle , a 
CUISHIC, CULLULG HU UISCUVELINE SOCLd UCMBU 
and arehitecture, During the last five years I 
traveled to over 20 countries on 4 continents, 
often with just my backpack and a map in hand. 


<ul class="documents"> 
<li><a href="expenses.xls" class="icon"> 
» Business expenses</a></1i> 
<1li><a href="vuser-manual.pdf" 
Class="icon">User Manual</a></1i> 
<]i>《<a href="story.docx" class="icon"> 
» Short story</a></1i> 
《Li><a href="brochure.pdf" class="icon"> 
» Vacation brochure</a></1i> 

</ul> 


» Victoria Re 
ws MexicoCity » Buenos Aires 
» Paris 1 


*" Lagos s Cairo 


sa Beijing 


可 归咎 No sprite 











No sprite 
14.9.8 ”ime 里 的 tabindex="0" 属性 (参见 图 1495 ) »s Business expenses 
让 :focus 伪 选 择 回 (参见 图 14.9.6 ) 得 以 正常 工作 ， 
如 果 访 问 者 使 用 键盘 的 Tab 键 ( 而 不 是 通过 鼠标 ) ”User Manual 
将 焦点 放 到 地 图 上 ， 也 可 以 让 城市 气泡 显示 出 来 。 。 Short story 
这 也 体现 了 可 访问 性 的 实现 ( 只 有 使 用 Tab 键 将 焦 | 
点 放 到 地 图 上 ， 才 会 显示 图 中 所 示 的 虚线 ) * Vacation brochure 





14.10.1 可 以 根据 文件 扩展 名 和 .icon 类 找到 
focus 伪 妆 菊 认 对 链接 和 我 二 元 素 过 对 应 该 文档 类 型 的 图 标 。 在 做 这 些 工作 之 前 ， 列 表 


作用 。 对 于 这 些 元 素 ， 不 必 添 加 tabindex="0"。 前 面 显示 默认 的 圆 点 
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14.10.2 ”这 个 sprite 图 像 包含 三 个 图 标 ， 每 个 
都 是 16 像素 x 16 像素 大 小 ， 相 邻 两 个 之 间 有 2 像 
素 的 空隙 

可 以 将 sprite 应 用 于 任意 数量 的 元 素 。 
在 这 个 例子 中 ， 我 使 用 .icon:before 来 实现 
所 需 的 效果 。 这 样 ，sprite 就 是 通过 content: 
"”"; 生成 的 空格 的 背景 图 像 。 将 其 设置 为 
display: block;， 从 而 可 以 设置 与 图 标 大 小 
匹配 的 高 度 和 宽度 。 没 有 这 三 个 属性 ， 图 像 
将 不 会 显示 。 通 过 使 用 background-position 
(如 图 14.10.3 所 示 ) ， 可 以 将 正确 的 图 标 放 
人 该 位 置 (如 图 14.10.4 所 示 ) 。 














.documents { list-style: none; } 


.icon { 
display: inline-block; 
min-height: 16px; 
padding-left: 23px; 
position: relative; 


l 


.icon:before { 
background-image: url(sprite.png); 
content: " " 


display: block; 

height: 16px; /* 图 标高 度 */ 
position: absolute; 

width: 16px; /* 图 标 宽度 */ 


上 


a[hzref$=".x1s"]:before { 
background-position: -17px 0; 
} 


a[fhref$=".docx"|:before { 
background-position: -34px 0; 


14.10.3 也 可 以 对 HIML 中 所 有 相关 的 a 
元 素 使 用 class="pdf"、class="x1s" 等 (人 参见 
图 14.10.1 ) 。 不 过 ， 根 据 href 值 中 的 链接 就 能 确 
定 文档 的 类 型 。 这 样 ， 通 过 使 用 $= 就 可 以 根据 特 
定 的 扩展 名 找到 对 应 的 类 型 








Icens sprite 


leons sprite 


图 | Business expenses 
人 | User Manual 
Short story 


| Vacation brochuyre 





14.10.4 ”每 个 链接 前 面 都 显示 出 了 正确 的 图 标 





每 个 sprite 都 可 以 包含 尺寸 不 同 的 图 
像 ， 这 些 图 像 之 间 的 距离 也 可 以 不 同 。 可 以 
将 它们 水 平 排列 ， 也 可 以 竖 直 排列 。 


使 用 sprite 并 不 一 定 要 使 用 :before 或 
:after。 可 以 将 sprite 背景 直接 用 于 元 素 本 身 。 


可 以 在 链接 或 其 他 元 素 的 :hover 状 
态 中 修改 sprite 的 background-position 以 实 
现 翻转 效果 。 


Project Fondue 提供 的 CSS Sprite Generator 

( http://spritegen.website-performance.org ) 是 一 
个 帮助 创建 sprite 和 背景 定位 的 工具 ( 有 很 多 
类 似 的 工具 ) 。 


本 节 使 用 的 图 标 来 自 Mark James 提 
供 的 免费 Silk 图 标 (www.famfamfam.com/lab/ 


icons/silk/ ) 。 


可 以 创建 为 Retina 显示 屏 或 其 他 高 像 
素 密 度 显示 屏 准 备 的 sprite， 参 见 12.5 节 。 
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列表 


本 章 内 容 

口 创建 有 序列 表 和 无 序列 表 

口 选择 标记 

口 使 用 定制 的 标记 

口 选择 列表 的 起 始 编号 

口 控制 标记 的 位 置 

口 同时 设置 所 有 的 列表 样式 属性 
口 设置 枫 套 列表 的 样式 

口 创建 描述 列表 








HTML 包含 专门 用 于 创建 项 目 列表 的 元 
素 。 你 可 以 创建 普通 列表 、 编 号 列表 、 符 号 
列表 以 及 描述 列表 ， 可 以 在 一 个 列表 中 肯 套 
万 外 一 个 或 多 个 列表 。 

所 有 的 列表 都 是 由 父 元 素 和 子 元 素 构 成 
的 。 父 元 系 用 于 指定 要 创建 的 列表 的 类 型 ， 
子 元 素 用 于 指定 要 创建 的 列表 项 目 类 型 。 下 
面 列 出 了 三 种 列表 类 型 以 及 组 成 它们 的 元 素 。 

口 有 序列 表 ，01 为 父 元 兹 ，1i 为 列表 项 。 

口 无 序列 表 ，ul 为 父 元 兹 ，1i 为 列表 项 。 

口 描述 列表 ,dl 为 父 元 素 ，dt 和 dd 分 

别 代 表 dl 中 的 术语 和 描述 。 描 述 列表 
在 HIMLS 之 前 称 为 定义 列表 。 

在 这 些 类 型 里 面 ， 无 序列 表 是 万 维 网 上 
最 为 常见 的 列表 类 型 ， 它 也 是 对 大 多 数 类 型 
的 导航 进行 标记 的 事实 标准 (本 书 有 几 个 这 
样 的 例子 ) 。 不 过 ， 上 述 三 种 类 型 都 各 有 用 
武之 地 ， 本 章 将 对 此 进行 讲解 。 




















15.1 创建 有 序列 表 和 无 序列 表 


如 果 列 表 项 的 顺序 对 于 列表 来 说 非常 关 
键 , 那么 这 种 情况 有 序列 表 就 是 恰当 的 选择 。 
有 序列 表 适 于 提供 完成 某 一 任务 的 分 步 说 明 
( 如 图 15.1.1 和 图 15.1.2 所 示 ) ， 或 用 于 创 
建 大 型 文档 的 大 纲 。 总 之 ， 它 适用 于 任何 强 
调 顺 序 的 项 目 列表 。 











<body> 


<h1>Changing a light bulb</h1> 


<ol1> 
<li>Make sure you have unplugged the 
lamp from the wall socket.</1i> 
<li>Unscrew the old bulb.</1i> 
<li>Get the new bulb out of the 
package.</1i> 
<li>Check the wattage to make sure 
it's correct.</1i> 
<li>Screw in the new bulb.</1i> 
<l1i>Plug in the lamp and turn it 
on!</1i> 
</01> 


</body> 
</html> 





图 15.1.1 目前 还 没有 对 列表 标题 进行 格式 化 的 正 
式 方法 。 大 多 数 情 况 下 ,使 用 常规 的 标题 或 段落 即 
可 ,就 像 下 面 的 例子 那样 。 按 照 惯例 (并非 必 须 ) ， 
可 以 对 列表 项 目 进行 缩 进 ， 表 明 它 们 是 般 套 在 ol 
里 面 的 (对 于 ul 也 是 这 样 的 )。 不 过 ， 这 些 缩 进 
在 页 面 中 不 会 显示 出 来 ， 页 面 中 的 显示 是 由 应 用 到 
列表 上 的 CSS 控制 的 
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Bn ordered list 
An ordered list 


Changing a light bulb 


. Make sure you have unplugged the lamp 
from the wall socket. 

. Unscrew the old bulb, 

. Get the new bulb out of the package. 

. Check the wattage to make sure it's correct. 

. SCrew In the new bulb. 

. Plug in the lamp and turn it on! 


15.1.2 ”这 个 列表 使 用 默认 的 阿拉 伯 数 字 创 建 市 
编号 的 有 序列 表 。 可 以 使 用 CSS 对 此 进行 修改 。 
有 序列 表 和 无 序列 表 在 显示 时 默认 都 会 进行 缩 进 ， 
无 论 它 们 在 HTML 中 是 否 有 缩 进 (参见 图 15.1.1 ) 


无 序列 表 恰 好 相反 ， 且 应 用 更 为 普遍 ， 
如 果 列 表 项 的 顺序 不 太 重 要 就 要 使 用 无 序列 
表 ， 人 参见 图 15.1.3 ~ 图 15.1.7。 

两 种 列表 类 型 都 适 于 标记 特定 类 型 的 导 
航 ， 参见 第 二 条 提示 。 








<body> 


<h1>Product Features</h1> 
<ul> 
<l1i>One-click page layout.</1i> 
<li>Spell-checker for 327 
languages. 
</1i> 
<li>Image retouching tool.</1i> 
<l1i>Unlimited undos and redos.</1i> 
</ul> 


</body> 
</htm]> 











15.1.3 ”无 序列 表 中 的 项 目 与 有 序列 表 中 的 是 相 
同 的 ， 只 有 ul 元素 是 不 同 的 














Product Features 


= One-click page layout. 

» Spell-checker for 321 languages. 
es [mape retouchine tool. 

sa Unlimited undos and redos. 





15.1.4 ”在 默认 情况 下 ， 无 序列 表 前 面 显 示 实 心 
的 圆 点 。 可 以 通过 CSS 对 此 进行 修改 


<h1 class="hdg">Product Features</h1> 
<Ul> 


<1li>One-click page layout.</1i> 


</ul> 





15.1.5 ”正如 在 图 15.1.4 中 所 看 到 的 ， 元 素 之 间 
的 默认 间距 并 不 理想 。 接 下 来 将 演示 如 何 对 该 样式 
进行 调整 。 这 里 的 HTML 与 图 15.1.3 中 的 是 相同 
的 ， 只 是 为 hi 添加 了 一 个 类 (这 也 是 使 用 类 方便 
的 原因 ) 。 添 加 了 图 15.1.6 中 的 样式 之 后 ， 就 可 以 
为 任何 刚好 位 于 ul 或 ol 前面 的 标题 添加 .hdg 类 ， 
并 得 到 相同 的 效果 。 类 似 地 ， 可 以 为 列表 创建 类 ， 
从 而 让 缩 进 和 间距 的 样式 规则 可 以 用 于 ol 或 册 











创建 列表 

(1) 输入 <ol>( 有 序列 表 ) 或 <ul> (无 
序列 表 ) 。 对 于 有 序列 表 ， 可 以 包含 start、 
type 和 reversed 这 三 个 可 选 的 属性 。 ( 天 于 
start, 参见 15.4 市 ; 关于 type, 参见 15.2 他; 
关于 feversed， 参 见 最 后 一 条 提示 。 ) 

(2) 输入 <1i> 以 开始 第 一 个 列表 项 目 。 对 
于 有 序列 表 ， 可 以 包含 可 选 的 value 属性 (更 
多 细节 参见 15.4 市 ) 。 
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(3) 添加 要 包含 在 列表 项 目 内 的 内 容 (如 
文本 、 链 接 、img 元 素 等 ) 。 

(4) 输入 </1i> 以 结束 列表 项 目 。 

(5) 对 于 每 个 新 的 列表 项 目 ， 重复 第 (2) 
步 至 第 (4) 步 。 

(6) 输入 </ol> 或 <Vul> (与 第 (1) 步 中 的 
开始 标签 对 应 ) 以 结束 列表 。 


body { 
font-family: sans-serif; 


} 


.hdg { 
font-size: 1.5em; 
margin-bottom: 0; 


} 


.hdg + ul, 
.hdg + 01 { /* 用 于 ul 或 0] */ 


margin-top: .5em; /* 约 8px */ 


} 


ul { /* 减少 缩 进 */ 
margin-left: 0; /* 针对 IE7 及 以 下 版 本 */ 
padding-left: 18px; /* 约 1.125em */ 


ul li { 
/* 列表 项 之 间 的 空格 */ 
margin-top: .4em; /* 约 6px */ 





} 


15.1.6 第 二 条 和 第 三 条 规则 定义 了 标题 与 列 
表 之 间 的 间距 ， 最 后 一 条 规则 定义 了 每 个 列表 项 目 
之 间 的 间距 。 第 四 条 规则 减 小 了 缩 进 ， 从 而 让 列表 
标记 更 靠近 左边 缘 。padding-left: 18px; 为 列表 
标记 腾 出 了 人 位置。 如 果 该 属性 值 为 0， 则 文本 会 对 
齐 左 边缘 ， 而 列表 标记 就 看 不 见 了 ， 因 为 标记 在 黑 
认 情 况 下 是 位 于 列表 项 目 之 外 的 。 不 一 定 非 要 使 用 
em 为 单位 ， 如 果 用 em 的 话 ， 要 记 住 em 值 是 相对 
于 父 元 素 的 字体 大 小 的 
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合生 向 An unordered list 


An unordered list 


下 重 
”| 


Product Features 

se One-click Page layout. 

= Spell-checker for 327 languages,. 
se Image retouching tool. 

a Unlimited undos and redos. 





15.1.7 页面 的 呈现 效果 好 了 很 多 


不 要 根据 希望 添加 在 内 容 旁 边 的 标记 
样式 决定 要 使 用 的 列表 类 型 ， 毕 竟 ， 这 些 标 
记 的 样式 随时 都 可 以 通过 CSS 进行 修改 (其 
至 可 以 在 有 序列 表 上 显示 符号 ) 。 相 反 ， 应 
该 考虑 列表 的 含义 一 一 列表 会 随 着 其 中 项 目 
顺序 的 改变 而 改变 吗 ? 如 果 答 案 是 肯定 的 ， 
就 使 用 有 序列 表 进 行 标 记 。 否 则 ， 就 使 用 无 
序列 表 。 


使 用 列表 标记 链接 组 时 ， 大 多 数 情况 
下 均 可 以 使 用 无 序列 表 ， 如 主导 航 链接 、 指 
向 一 组 视频 或 相关 报道 的 链接 、 页 脚 中 的 一 
组 链接 等 。 对 于 面包 悄 导 航 则 应 使 用 有 序列 
表 ， 因 为 这 些 链接 有 特定 的 次 序 ( 换 句 话说 ， 
顺序 是 有 意义 的 ) 。 面 包 导 导航 通常 水 平地 
显示 在 主要 内 容 区 域 的 上 方 ， 指 示 当 前 页 面 
在 网 站 导航 路 径 中 的 位 置 。 分 页 标记 是 链接 
的 水 平 列 表 ， 看 起 来 像 1 | 2 | 3 | 4， 通 常会 
现 搜 索 结 果 和 产品 的 列表 ， 人 允许 你 在 不 同 的 
结果 页 面 之 间 跳 转 。 图 15.7.5 包含 了 主导 航 
和 面包 硝 的 例子 。 
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第 11 章 和 第 12 章 的 完整 示例 网 页 演 
示 了 使 用 和 呈现 列表 的 各 种 方式 。 其 中 有 用 
于 导航 和 其 他 链接 组 的 无 序列 表 、 用 于 一 系 
列 链接 到 之 前 的 博客 条 目的 有 序列 表 。 第 3 
章 也 有 在 导航 中 使 用 ul 的 例子 。 


有 序列 表 中 
2、3 等 ) 进行 编 


除非 使 用 CSS 另行 指定 ， 
的 项 目 使 用 阿拉 伯 数 字 (1、 
号 (参见 图 13.1.2 ) 。 


默认 情况 下 ， 无 序列 表 的 项 目前 面 显 

示 实 心 的 圆 点 (参见 图 15.1.4 ) 。 你 可 以 选择 

不 同 的 符号 (参见 15.2 节 ) ， 甚 至 可 以 自 定 
义 符号 (参见 15.3 节 )， 


6 列表 在 默认 情况 下 是 从 左边 缩 进 的 ， 
不 过 可 以 通过 CSS ( 参见 图 15.1.6 ) 取消 缩 进 、 
减 小 缩 进 (参见 图 1$.1.7 ) 或 增加 缩 进 。15.3 
节 也 演示 了 这 些 操 作 。 列 表 标 记 可 能 会 显示 在 
内 容 的 外 面 ， 也 可 能 因为 超出 窗口 的 边缘 而 消 
失 (参见 图 15.1.6 所 示 的 内 边 距 为 零 的 样式 ) 。 


默认 情况 下 ， 列 表 有 一 定 的 左 侧 外 边 
距 ， 二 进 。 可 以 使 用 CSS 取消 ( 减 小 ) 
或 增 大 缩 进 ， 参 见 图 15.1.6 和 图 15.1.7。15.3 节 
也 会 解释 这 一 点 。 根 据 减 少 缩 进 的 量 ， 符 号 可 
能 处 于 内 容 的 外 边 或 者 消失 在 窗口 的 左边 缘 之 
外 (参见 图 15.1.6 中 假设 内 边 距 为 0 的 情况 ) 。 
可 以 在 一 个 列表 中 创建 另 一 个 列表 
( 即 散 套 列 表 ，nesting list ) ， 甚 至 可 以 混合 
或 者 搭配 使 用 有 序列 表 和 无 序列 表 。 不 过 ， 
要 确保 用 到 所 有 需要 的 开始 标签 和 结束 标签 ， 
对 每 个 列表 进行 正确 地 上 识 套 。 上 驳 套 有 序列 表 
和 无 序列 表 的 例子 见 15.7 节 。 
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岳阳 ”只 能 将 列表 内 容 放 在 基 元 素 里 ,例如 ， 
不 允许 将 内 容 放 置 在 0ol 或 ul 开始 标签 和 第 
一 个 1 元 素 之 间 。1i 元 素 里 面 可 以 放置 多 种 
类 型 的 元 素 ， 如 各 种 短语 内 容 元 素 (em、a、 
cite 等 ) 。 在 列表 项 目 中 误 套 段落 、div 这 样 
的 元 素 也 是 有 效 的 。 


如 果 将 内 容 方 向 指定 为 从 右 向 左 ( 例 
pg 言 为 希 伯 来 语 的 情况 下 ) ,列表 就 会 
通过 右 侧 外 边 距 进行 缩 进 。 要 指定 内 容 方 向 ， 
可 以 在 页 面 的 html 元 素 中 设置 dir 属性， 如 
<html dir="rtl"”lang="he">。 在 这 个 例子 中 ， 
lang 被 设 为 表示 硕 伯 来 语 的 he。 还 可 以 在 body 
里 面 的 元 素 上 设置 dir 和 1ang 以 履 盖 html 元 
素 上 的 设置 。dir 属性 的 默认 值 为 1tr。 


截至 本 书写 作 之 际 ,， 浏览 器 对 布尔 
型 reversed 属性 的 支持 还 不 够 理想 : 只 有 
Chrome 18+、Firefox 18+ 和 Safari 5.2+。 该 属 
性 的 作用 是 指示 降序 排列 的 有 序列 表 (使 用 
<01 reversed> 或 《01 reversed="reversed"> 
均 可 指定 该 属性 ) 。 支 持 该 属性 的 浏览 器 会 
自动 颠倒 列表 的 编号 。 


15.2 ”选择 标记 


创建 列表 时 ， 无 论 是 有 序列 表 (如 
图 15.2.1 所 示 ) 还 是 无 序列 表 ， 都 可 以 选择 
出 现在 列表 项 目 左 侧 的 标记 的 类 型 。 








1. 选择 标记 

在 样式 表 中 ， 输 入 list-style-type: 
marker, 这 里 的 marker 是 以 下 属性 值 中 的 一 种 。 

DO disc ( 圆 点 ，@) 

D circle (圆圈 ，O 〇 ) 

D square (方块 ， 国 ) 


苯 重 版 权 


口 decimal ( 数字 ，1、2、3.……. ) 
口 upper-alpha ( 大 写字 母 , A、B、C 


到 ) 
口 lower-alpha( 小 写字 母 ,a、b、c 
本 ) 


口 upper-roman ( 大 写 罗 马 数 字 ， 工 、 
1s :Ls DN ss ) ， 如 图 15.2.2 和 
图 15.2.3 所 示 

口 lower-roman ( 小写 罗马 数字 , i、 i、 


iii、 iv** ) 


<body> 


<h1 Class= hdg >The Great American Novel</h1> 

<01> 
<1i>Introduction</1i> 
<l1i>Development</1i> 
<1i>Climax</1i> 
<l1i>Denouement</1i> 
<1i>Epilogue</1i> 

</ol1> 


</body> 
</html> 


图 15.2.1 这 是 用 做 示例 的 有 序列 表 。 我 们 将 对 其 
应 用 大 写 罗 马 数字 ( upper-roman ) 。 注 意 ， 为 了 利用 
图 15.1.6 中 的 .hdg 规则 ， 我 对 hi 应 用 了 class="hdg" 








li { 
list-style-type: upper-roman; 
} 


/* 下 面 的 代码 的 效果 一 样 ， 因 为 1i 元 素 继承 1ist- 


style-type 属 性 


ol { 
list-style-type: upper-roman; 


和 


15.2.2 可 以 对 ol (参见 注释 ) 、 岂 或 者 列表 
项 本 身 应 用 list-style-type 属性 ， 如 下 面 的 代码 
所 示 。 虽 然 这 里 没有 显示 ， 但 我 为 body 元 素 应 用 
了 某 种 字体 
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BD Choosing YourMarkers 


Choosing Your Markers 


The Great American Novel 


|. Introduction 


I. Development 
ll. Climax 

IV. Denouement 
Vv. Epilogue 

















15.2.3 ”现在 ， 有 序列 表 采 用 大 写 罗马 数字 进行 
编号 。 注 意 ， 大 多 数 浏 览 器 会 让 编号 右 对 齐 





2. 显示 无 标记 列表 
在 样式 表 规 则 中 ,输入 list-style-type: 


NoNe。 


可 以 通过 1list-style-type 对 ol 和 Ul 
设置 任何 标记 样式 。 换 名 话说 ， 可 以 对 01 使 
用 方块 标记 ， 也 可 以 对 Ul 使 用 数字 标记 。 


还 有 大 量 的 其 他 标记 类 型 可 用 ， 不 过 
济 wp 同 标记 类 型 的 支持 情况 不 同 。 


也 可 以 在 HIML 中 通过 type 属性 
2 有 序列 表 指 定 标 记 类 型 ， 但 推荐 的 做 法 是 

We CSS 中 定义 列表 样式 类 型 。 一 种 
例 i 请 参见 html5doctor.com/ol-element- 
attributes/。 pe 属性 可 接受 的 值 包括 人 A、a、I、 
ii 和 1( 默 认 值 为 1) 。 例 如 ,， 《ol type="I"> 
表示 使 用 大 写 罗 马 数字 作为 编号 。 


15.3 ”使 用 定制 的 标记 


如 采 对 使 用 圆圈 、 方 块 、 加 点 以 及 罗马 
数字 这 些 标 记 感 到 厌倦 ， 也 可 以 使 用 图 像 创 
建 自 己 定制 的 标记 。 要 使 用 定制 的 标记 ， 不 
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必修 改 HTML ( 如 图 15.3.1 所 示 ) ， 仅 需 修 
改 CSS (参见 图 15.3.2 ~ 图 15.3.7)。，。 


<body> 


<h1 class="hdg">Product Features</h1> 
<U]> 
<1li>One-click page layout.</1i> 
<1li>Spell-checker for 327 major 
languages.</1i> 
<li>Image retouching tool.</1i> 
<1i>Unlimited undos and redos.</1i> 
</ul> 


</body> 
</htm]> 











15.3.1 这 个 列表 与 任何 普通 无 序列 表 都 是 相似 
的 ， 不过， 加 上 一 些 CSS 后 ， 它 看 起 来 就 不 一 样 了 


使 用 定制 的 标记 

(1) 在 目标 列表 或 列表 项 的 样式 规则 中 ， 
输入 list-style: none; 以 取消 常规 的 标记 。 

(2) 在 目标 列表 的 样式 规则 中 ,设置 
margin-left 和 /或 padding-left 属性 ， 指 定 
列表 项 目 绚 进 的 大 小 。 为 了 在 不 同 的 浏 哎 可 
上 实现 相似 的 效果， 通常 需要 同时 设置 这 两 
个 属性 ( 参见 图 15.3.2 和 图 15.3.6 ) 。 注 意 ， 
如 果 为 内 容 设置 了 dir="rt1"， 那 么 就 应 该 设 
置 margin-right 和 padding-right 属性 。 关 于 
在 列表 中 使 用 dir、lang 及 从 右 至 左 的 语言 ， 
参见 15.1 节 的 提示 。 

(3) 在 目标 列表 的 二 元 素 的 样式 规则 中 ， 
输 和 人 background: url(image.ext) repeat- 














type horizontal vertical;， 其 中 image.ext 是 
要 作为 定制 标记 的 图 像 的 路 径 和 文件 名 ， 
repeat-type 是 no-repeat、repeat-x 和 
repeat-y 中 的 一 种 ( 通常 设 为 no-repeat ) ， 
horizontal 和 vertical 值 表示 列表 项 目 中 篆 
景 图 像 的 位 置 ( 如 图 15.3.2 所 示 ) 。 





(4) 输入 padding-left: valwe;， 这 里 的 
valve 应 不 小 于 背景 图 像 的 宽度 ， 以 防 列表 项 
目的 内 容 窗 产 到 定制 标记 的 上 面 。 


/* 取消 默认 标记 */ 
list-style: none; 


/* 删除 列表 项 的 缩 进 */ 
margin-left: 0; 
padding-left: 0; 


/* 显示 宋 制 的 标记 对 
background: url(../img/checkmark.png) 
no-repeat 0 0; 











15.3.2 下 面 会 用 三 步 法 展示 如 何 使 用 定制 的 
标记 ， 这 样 谈 者 会 对 各 种 CSS 属性 如 何 有 影响 布局 
一 目 了 然 。 首 先 ， 清除 默 认 的 标记 (这样 就 看 不 到 
符号 和 季 头 了 ) ， 如 果 想 删除 列表 项 目的 缩 进 ， 应 
该 将 margin-left 和 padding-left 都 设 为 0 (参见 
倒数 第 二 条 提示 ) 。 应 用 于 列表 项 的 定制 标记 的 
URL 看 起 来 不 一 样 ( 参见 第 一 条 提示 ) ， 通 常 使 
用 PNG, 但 GIF 或 JPEG 也 行 
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Product Features 


外 Ge-click page layout. 
Spell-checker for 327 languages. 
mge retouching tool. 

Walimited undos and redos. 





15.3.3 ”默认 的 圆 点 被 核对 图 像 取 代 了 ， 列 表 项 
之 前 的 缩 进 被 移 除 了 ,但 是 文本 闭 加 到 了 新 的 标记 
上 ， 那 么 要 不 要 针对 列表 诬 加 左 内 边 距 ， 从 而 让 标 
记 和 列表 项 之 间 有 点 空间 呢 ?” 让 我 们 来 试 试 ， 请 看 
图 15.3.4 
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ul { 
list-style: none; 
margin-left: 0; 
padding-left: 30px; 
outline: 2px solid red; 


background: url(../img/checkmark.png) 
" ho-repeat 0 0,; 
outline: 1px solid blue; 


图 15.3.4 将 margin-left 设 为 0 后 ， 就 可 以 针对 
所 有 浏览 器 使 用 padding-left 控制 列表 项 目的 缩 
进 了 。 我 对 ul 和 每 个 1i 都 添加 了 一 个 临时 的 边 
框 ， 从 而 可 以 清晰 地 看 到 应 用 内 边 距 的 位 置 (参见 
图 15.3.5 ) 
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Lo | 


Product Features 


15.3.5 ”这样 做 让 列表 项 目 有 了 缩 进 ， 但 文字 





依然 与 标记 重 谷 了， 这 是 因为 我 们 仪 为 列表 本 号 
(Ul) 添加 了 左 内 边 距 ， 但 没有 对 包含 标记 的 列表 
项 目 添加 左 内 边 距 。 下 面 将 修复 这 个 问题 (参见 
图 15.3.6 ) 

















注意 ， 相 对 背景 URL 是 相对 于 样式 
表 的 位 置 ， 而 不 是 相对 于 网 页 的 位 置 (参见 


图 15.3.2) ， 相 关内 容 参 见 10.10 节 。url 和 
前 揪 号 之 间 不 应 有 空格 ， 包 围 URL 的 引号 是 
可 选 的 。 
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ul { 
list-style: none; 
margin-left: 0; 
padding-left: 0; 


} 


li { 
/* 让 图 像 在 列表 项 目 内 显示 的 位 置 稍微 往 
T= 此 入 
background: url(../img/checkmark.png) 
no-repeat 0 .1em; 


/* 让 行 高 变 大 ， 从 而 可 以 容纳 整个 标记 */ 
line-height: 1.8; 


/* 将 文本 推 开 ， 为 标记 腾 出 位 置 */ 
padding-left: 1.75em; 








15.3.6 将 岂 的 左边 距 重 新 设 为 0， 列 表 会 再 
次 向 左 对 齐 。 为 每 个 1i 设置 左 内 边 距 可 以 将 所 有 
标记 图 像 显 示 出 来 ， 增 大 line-height 则 可 以 保 
证 图 像 底部 不 会 被 截断 。 此 外 ， 这 里 还 计 标 记 回 
下 移动 了 一 些 ， 从 而 可 以 与 文本 更 好 地 对 齐 ( 如 
图 15.3.7 所 示 ) 
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Product Features 
One-click page layout, 
Spell-checker for 327 languages. 


Image retouching tool. 
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15.3.7 好 多 了 


默认 标记 在 默认 情况 下 位 于 列表 项 目的 
外 面 ， 而 定制 标记 显示 在 列表 项 目的 里 面 ， 因 
为 定制 标记 是 为 列表 项 目 本 身 应 用 的 背景 图 像 。 

二 者 的 对 比 参 见 15.1 节 的 图 15.1.5 ~ 图 15.1.7。 

那些 内 容 还 演示 了 如 何 实 现 本 节 图 15.3.7 所 示 的 
减 小 标题 下 面 的 间距 和 格式 化 文本 的 样式 。 
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如 果 想 为 列表 中 的 茶 一 个 或 几 个 项 目 


ee We 


大 多 数 浏览 器 是 通过 padding-left 为 
列 天 设 轩 默认 缩 进 的 ， 但 旧 浏 览 器 ( 如 IE8 
之 前 版 本 ) 则 是 通过 margin-left 设置 的 。 这 
就 是 要 在 使 用 padding-left 获得 统一 样式 结 
果 之 前 需要 设置 margin-left: 0; 的 原因 。 现 
在 ,尽管 通常 不 必 为 IE7 及 更 旧 的 浏览 器 考虑 
了 (对 于 大 多 数 国家 来 说 ) ， 
left: 0; 也 没有 任何 坏处 。 


但 添加 margin- 


另 一 种 显示 定制 标记 的 方法 是 使 用 
]ist-style-image 属性 。 例 如 , 1i { list-style- 
image: url(image.png); }。 不 过 ， 使 用 这 种 
方法 很 难 达 到 预期 的 效果 ， 因 为 不 同 浏览 器 
对 它 的 显示 效果 并 不 一 致 。 并 且 相 比 前 面 展 
示 的 背景 图 像 方 法 ， 开 发 者 更 难 控制 图 像 标 
记 的 位 置 。 


15.4 选择 列表 的 起 始 编号 


你 可 能 希望 列表 的 编号 从 默认 值 1 以 外 
的 某 个 数字 开始 , 如 图 15.4.1 和 图 15.4.2 所 示 。 


1. 设置 整个 列表 编号 方案 的 初始 值 
在 ol 开始 标签 中 输入 start="n"， 这 里 


的 n 表示 列表 的 初始 值 。 
2. 修改 有 序列 表 中 未 列表 项 目的 编号 





在 目标 1 项 目 内 输入 value="n"， 这 里 
的 7 代表 该 列表 项 目的 值 。 
如 果 使 用 start 和 type， 请 始终 使 用 


提 示 | 
即便 决定 使 用 字母 或 罗马 数字 对 列表 
进行 编号 (参见 15.2 节 ) ， 也 应 使 用 数字 。 
通过 CSS 或 者 type 属性 会 显示 预期 的 标记 。 
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<body> 


<h1 class="hdg">Changing a light bulb (with a 
few steps missing)</h1> 


<0] start="2"> 
<li>Unscrew the old bulb.</1i> 
<li value="5">Screw in the new bulb. 
> </1i> 
《Li>Plug in the lamp and turn it on! 
< 11> 
</01> 


</body> 
</html> 


图 15.4.1 在 这 个 例子 中 ， 我 略 去 了 列表 中 的 一 些 
ee 
此 ， 整 个 列表 从 2 开始 编号 (使 用 start="2" )， 
并 将 第 二 个 项 目的 值 设 为 (使 用 value="5") 。 
这 两 个 属性 都 是 可 选 的 ， 也 不 一 定 要 像 这 样 同 时 
使 用 


EH 


BD DD Choosing Where to Start List... 


:| Choosing Where to Start List Nu... 


Changing a light bulb 


(with a few steps missing) 


2. Unscrew the old bulb. 
5. Screw in the new bulb. 
6. Plug in the lamp and turn it on! 





图 15.4.2 注意 ,不仅 第 一 个 和 第 二 个 项 目 是 按 
我 们 指定 的 规则 进行 编号 的 ， 连 第 三 个 项 目 (Plug 
in the lamp and turn it on! ) 也 受到 了 影响 (我 为 
页 面 添加 了 一 些 样式 , 但 并 没有 将 CSS 写 在 这 
里 。 我 将 body 字体 设 为 Georgia， 对 hi 应 用 了 
class="hdg"， 如 图 15.4.1 所 示 ， 并 应 用 了 15.1 市 
中 图 15.1.6 中 的 .hdg 样式 规则 ) 


value 属性 的 值 会 窗 盖 start 属性 
的 值 。 
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使 用 value 属性 对 某 列 表 项 目的 编号 
进行 修改 后 ， 后 续 的 列表 项 目 也 会 相应 地 重 
新 编号 。 


如 果 需 要 在 有 序列 表 中 指定 两 个 或 两 
个 以 上 位 置 相 同 的 项 目 , 使 用 value 是 非常 方 
便 的 。 以 表示 公路 赛 前 五 名 选手 的 列表 为 例 ， 
通常 该 列表 会 显示 为 1、2、3、4、5， 但 如 果 
有 并 列 第 2 名 ， 则 可 以 将 第 三 个 项 目 写 成 《1i 


value="2">, 这 时 , 列表 将 显示 为 1、2、2、3、4。 


性 的 11i。 


列表 可 以 包 念 一 个 以 上 的 带 value 必 


15.5 ”控制 标记 的 位 置 


默认 情况 下 ， 列 表 会 从 ( 其 父 元 系 的 ) 
左 侧 进 行 缩 进 。 标 记 可 以 位 于 整个 文本 块 的 外 
面 (这 是 默认 情况 ) ， 如 图 15.5.1 所 示 ， 也 可 
以 缩 在 文本 块 内 《〈 称 为 缩 排 ) ， 如 图 15.5.2 和 
图 15.5.3 所 示 。 








入 全 Controlling where Markers Hang (outside) wm® 
] | :Controlling where Markers Han... | 


Product Features 


s One-click page layout. (This is particularly 
USeful when you're under a heavy deadline. 


You just select whether you want the end 
product to be a book or a website, and poot, 
t's done!l) 


。 Spell-checker for 327 languages. 
as Image retouching tool. 
- Unlimited undos and redos,. 


15.5.1 这 说 明了 在 默认 情况 下 浏览 磊 呈 现 列 表 
项 目 文 本 及 标记 之 间 相 对 位 置 的 方式 。 标 记 位 于 内 
容 的 外 边 








ul { 


list-style-position: inside; 


} 





15.5.2 将 list-style-position 设置 为 inside 
可 以 改变 显示 方式 


局 和 向 Controlling where Markers Hang linside) 上 
| Controlling where Markers Han. . | | 


Product Features 


sa One-click page layout. (This is particularly 
useful when YouTe under a heavy deadline. 


You just select whether you want the end 
product to be a book or a website, and poof, 
t's donel) 


* Spell-checker ior 327 languages. 
s Image retouching tool, 
sa Unlimited undos and redos. 











15.5.3 每 行 的 标记 都 是 从 列表 项 目的 左 侧 外 边 
距 开始 的 ， 而 不 是 在 整体 内 容 之 外 


控制 标记 位 置 的 步 又 

(1) 在 目标 列表 或 列表 项 目的 样式 表 规 则 
中 ， 输 入 list-style-position:。 

(2) 输入 inside 让 标记 缩 在 文本 块 内 (人参 
见 图 15.5.2 ) ， 或 者 输入 outside 让 标记 显示 
在 列表 项 目 文本 的 左边 〈 这 是 默认 的 设置 ) 。 


不 需要 指定 list-style-position: 
outside; ， 因 为 outside 是 默认 值 ， 除 非 需要 履 盖 
其 他 位 置 设置 的 list-style-position: inside;。 








list-style-position 可 应 用 于 ul( 参 
见 图 15.5.2) 、01l 或]i。 结 果 是 一 样 的 ， 除 
非 针对 特殊 的 1i ( 如 某 一 类 的 1i) 设置 不 同 
的 样式 ， 从 而 在 一 个 列表 中 同时 拥有 内 部 标 
记 和 外 部 标记 。 
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如 果 列 表 项 目 中 的 文本 显得 较为 拥 
挤 ， 就 像 图 15.5.1 和 图 15.5.3 中 的 那样 ， 则 
可 以 通过 设置 ]ine-height 增 大 文本 行 间距 。 
例如 ， 可 以 设置 li { line-height: 1.3; }。 
不 要 将 行 高 的 设置 与 列表 项 目 间 距 ( 由 对 1i 
设置 的 margin-top 或 margin-bottom 控 制 ) 


再 混 。 全 如，1i { margin-bottom: .5em; }。 


如 何 减少 列表 项 前 面 的 缩 进 和 标题 下 
面 的 间距 ， 以 及 如 何 格式 化 文本 参见 图 15.1.5 
至 图 15.1.7。 


list-style-position 属性 是 继承 的 。 


15.6 同时 设置 所 有 的 列表 样式 
属性 

同 background、border、font、outline 等 

属性 一 样 ，CSS 也 为 list-style 提供 了 简写 

形式 ， 参 见 图 15.6.1 和 图 15.6.2。 它 将 list- 


style-type、1ist-style-position 和 较 少 使 用 
的 list-style-image 放 到 了 一 条 属性 中 。 


ul { 
list-style: circle inside; 


1 


/* 将 01 作 为 选择 器 为 无 序列 表 添 加 样式 ， 有 序列 表 
和 无 序列 表 都 可 以 使 用 1i */ 


15.6.1 使 用 这 条 样式 规则 等 价 于 将 list-style- 
type 设 为 circle， 并 将 list-style-position 设 为 
inside， 只 是 这 样 写 更 为 简洁 。 如 末 想 在 简写 属 
性 中 指定 list=style-images 这 个 例子 可 以 写作 
ul { list-style: url(arrow-right.png) circle 
inside; }。 但 第 15.3 节 提 到 过 ， 最 好 对 1i 应 用 背 
景 图 像 ， 而 不 是 使 用 1ist-style-image 














list=styhe Shorthand 


list-style Shorthand 


Product Features 


o One-click page layout. (This is particularly 
USeful when you'Te under a heavy deadline. 
You just select whether you want the end 
product to be a book or a website, and poof， 
it's done!) 


o Spell checker for 327 major languages. 
o Image retouching tool, 
o Unlimited undos and redos,. 


15.6.2 代码 的 实现 结果 与 图 15.5.3 相同 ， 只 是 
将 标记 改 成 了 圆圈 


同时 设置 所 有 的 列表 样式 属性 的 步骤 

(1) 输入 list-style:。 

(2) 如 果 需 要 ， 指 定 应 出 现在 列表 项 目 劳 
边 的 标记 类 型 (参见 15.2 市 ) 。 

(3) 如 果 需 要 ， 指 定 标记 应 悬挂 在 列表 段 
落 之 外 或 缩 在 文本 块 内 〈 人 参见 15.5 节 ) 。 

(4) 如 果 需 要 ， 指 定 列 表 项 目 所 用 的 定制 
图 像 标记 (参见 15.3 节 最 后 一 条 提示 ) 。 


可 以 指定 三 个 list-style 属性 ， 也 可 
以 指定 其 中 的 任意 一 个 ， 指 定 多 个 属性 时 顺 
序 任意 。 图 15.6.1 中 指定 了 两 个 。 任 何 没有 
显 式 地 指定 的 属性 部 会 设 为 其 默认 值 (1ist- 
style-type 的 默认 值 为 disc，1list-style- 
image 的 默认 值 为 none，1ist-style-position 
的 默认 值 为 outside ) 。 








关于 list-style， 或 许 最 为 常见 的 用 
法 是 使 用 list-style: none 取消 标记 。 


跟 list-style-type、1ist-style- 
position 和 list-style-image 属性 一 和 样 ， 
list-style 属性 是 继承 的 。 这 也 是 我 们 可 以 
将 它 应 用 到 父 元 素 01 或 Ul 上 的 原因 。 
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15.7 设置 其 套 列表 的 样式 


可 以 在 一 个 列表 中 插入 为 一 个 列表 ,里 
面 的 列表 就 称 为 散 套 列表 。 对 于 有 序列 表 和 
无 序列 表 均 可 创建 艇 套 列 表 ( 混合 在 一 起 或 
单独 能 套 ) 。 此 外 ,还 有 男 外 一 种 向 套 列 表 ， 
有 关 示 例 参 见 15.8 市 。 

如 果 要 按 有 序列 表 的 结构 创建 大 纲 (可 
能 需要 好 几 级 的 列表 项 目 ， 如 图 15.7.1、 
图 15.7.2 和 图 15.7.3 所 示 ) ， 或 者 需要 按 无 序 
列表 的 结构 创建 带子 某 单 的 导航 〈 如 图 15.7.4 
和 图 15.7.5 所 示 ， 更 多 细节 参见 补充 材料 “使 
用 骸 套 列表 创建 下 拉 式 导航 ”) ， 就 会 发 现 航 
套 列表 很 有 用 。 可 以 通过 很 多 方式 为 航 套 列表 
设置 样式 ， 就 像 示 例 所 展示 的 那样 。 

为 通 套 列表 设置 样式 的 步骤 

(1) 要 设置 最 外 层 列 表 的 样式 ， 输 入 
toplevel 1i {style rules}， 其中，toplevel 
是 最 外 层 列 表 的 类 型 (如 ol、 ul)，,， style_ 
rules 是 要 应 用 的 样式 。 

(2) 对 于 第 二 级 列表 ， 输 入 toplevel 
2ndlevel {style rules}， 其 中 ，toplevel 对 
应 于 第 (1) 步 中 的 toplevel]，2ndlevel 则 是 第 
二 级 列表 的 类 型 ， 而 style_rules 是 它 需 要 应 
用 的 样式 。 

(3) 对 于 第 三 级 列表 ， 输 入 toplevel 
2ndleve] 3rdlevel] {style rules}， 其 中 ， 
toplevel 和 2ndlevel 对 应 于 第 (1) 步 和 第 2) 
步 中 的 toplevel 和 2ndleve1]，3rdlevel 则 是 
第 三 级 列表 的 类 型 。 而 style_rules 则 是 它 需 
要 应 用 的 样式 。 

(4) 对 于 要 设置 样式 的 每 个 般 套 列表 ， 继 
续 以 上 述 方法 进行 设置 。 

可 以 在 每 个 选择 硕 末 尾 包 含 11， 从 而 
直接 定位 列表 项 目 ， 例 如 ， 第 (3) 步 中 的 代 
码 可 以 写作 toplevel 2ndlevel 3rdlevel 1i 
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{style_rules}， 图 15.7.2 中 的 示例 代码 中 有 
这 两 种 例子 。 


<body> 
<h1 class= hdg >The Great American Novel</h1> 
<01> 
<1i>Introduction 
<ol1> 
<li>Boy's childhood</1i> 
<1i>Girl's childhood</1i> 
</01> 
</1i> 
<1i>Development 
<ol1> 
<li>Boy meets Girl</1i> 
<li>Boy and Girl fall in love 
</1i> 
<l1i>Boy and Girl have fight 
</1i> 
</01> 
</1i> 
<1i>Climax 
<01> 
<li>Boy gives Girl ultimatum 
<0]> 
<1i>Girl can't believe 
her ears</1i> 
<li>Boy is indignant at 
Girl's indignance</1i> 
</01> 
</1i> 
<1i>Girl tells Boy to get 
lost 
</1i> 
</01> 
</1i> 
<1i>Denouement</1i> 
<1i>Epilogue</1i> 
</01> 
</body> 
</html> 








15.7.1 注意 每 个 藤 套 的 ol 都 包含 在 其 父 元 
素 的 开始 标签 <li> 和 结束 标签 </1i> 之 间 。 这 里 
有 四 个 舱 套 列表 ， 一 个 位 于 Introduction 列表 项 目 
内 ， 一 个 位 于 Development 列表 项 目 内 ， 一 个 位 于 
Climax 列表 项 目 内 ， 还 有 一 个 突出 显示 的 粗 体 字 
列表 位 于 Boy gives Girl ultimatum 列表 项 目 内 (该 
列表 项 目 又 位 于 Climax 列表 项 目 内 ) 
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局 日 辣 Styling Nested Ordered Lists 
list-style-type: upper-roman; :Styling Nested Ordered Lists | 


} 


ol ol { 
list-style-type: upper-alpha; 


The Great American Novel 


|. IntrodUuction 
} A, Boy's childhood 
B. Girl's childhood 
l|, Development 
ol ol ol { A. Boy meets Girl 
list-style-type: decimal; B. Boy and Girl fall in love 
} C. Boy and Girl have fight 
lll, Climax 
VL 二 1 A, Boy gives Cirl Ultimatum 
font-size: .875em; 1, Girl can't believe her ears 
} 2, Boy is indignant at Girl's 
indignance 
li 1i { B. Girl tells Boy to get lost 
font-size: 1emj /# 防止 文本 不 断 缩小 */ Ri, Dertortereant 


} VY. Epilogue 


15.7.2 ”可 以 对 每 一 级 般 套 列表 单独 进行 格式 15.7.3 ”第 一 级 列表 ( ol ) 使 用 大 写 罗 马 数 学， 
化 。 如 果 要 对 列表 中 的 文本 使 用 em 或 百分数 设置 第 二 级 列表 (ol ol ) 使 用 大 写字 母 , 第 三 级 列表 (ol1 
字体 大 小 ， 就 需要 添加 1i 1i {font-size: 1em; } ol ol ) 使 用 阿拉 伯 数 字 

(或 者 将 lem 替换 为 100%) ， 以 防止 租 套 列表 不 

断 缩小 而 导致 难以 辨认 (参见 最 后 一 条 提示 ) 

















<body> 
<nav role="navigation"> 
<ul class= "nav > 
《Li><a href="/">Home</a></1i> 
《Li><a href="/products/">Products</a> 
<ul class= "subnav > 
<]Li><a href="/products/phones.htm]l">Phones</a></1i> 
<li><a href="/products/accessories.html">Accessories</a></1i> 
</ul> 
</1i> 
<li>¢a href="/support/">Support</a> 
<ul class="subnav"> 
<1Li><a href="/support/forum/">Community Forum</a></1i> 
<li><a href="/support/contact-us.htm]l">Contact Us</a></1i> 
<1li><a href="/support/how-to-guides.html">How-to Guides</a></1i> 
</ul> 
</1i> 
《LI1>《<a href="/about-us/">About Us</a></1i> 
</ul><!-- end .nav --> 
</nav> 


</body> 
</html> 








15.7.4 ”这 是 男 一 个 舱 套 列表 的 例子 。 在 这 个 例子 中 ,使 用 无 序列 表 构 建 导航 菜单 ( 带 有 class="nav" )， 
同时 使 用 两 个 藤 套 的 无 序列 表 构 建 子 菜单 ( 每 个 都 带 有 class="subnav" ) 。 通 过 一 些 CS5， 可 以 让 导航 水 
平 排列 ， 同 时 让 子 沫 单 在 默认 情况 下 隐藏 起 来 ， 并 在 访问 者 激活 它们 时 显示 出 来 ， 如 图 15.7.5 所 示 

图 灵 社 区 会 员 wenshanjun 专 享 尊重 版 权 








15.7 设置 谱 套 列表 的 样式 313 


SA Dropdown Navigation with Nested Lists 





! ) Dropdown Navigation with Nest... EE 


Home Products 


Home > Products > Phones > The Fone7.0TM 


The Fone 7.0™ 


We're proud to introduce our latest innovative device. 


Wwww.thephoneycompany,.com/sypport/forum/ 








About Us 


inity Fqgym 


Contact Us 
How-to Guldes 


15.7.5 ”Products 和 Support 列表 项 目 都 包含 般 套 在 ul 中 的 子 菜 单 ， 不 过 ， 由 于 应 用 了 一 些 CSS， 这 两 





个 子 集 单 在 和 爽 认 情况 下 并 不 显 





示 出 来 。 在 这 个 例子 中 ，Support 的 子 菜单 显示 出 来 了 ， 








这 是 因为 鼠标 停留 





在 包含 Support 链接 及 子 菜 单 栅 套 列表 (参见 图 15.7.4 ) 的 11 上 的 缘故 。 这 个 截图 也 显示 了 一 个 面包 居 导 











航 的 例子 (位 于 黑色 横 条 的 下 方 ) 。 
层级 中 的 人 位置。 其中， 每 个 列表 项 目 都 是 一 个 
Fone 7.0。 完 整 的 CSS 见 本 书 配套 网 站 








ER 选择 器 应 反映 文档 中 睦 套 列表 的 类 
型 ， 例 如 ， 可 能 需要 使 用 岂 ul 0l1 这 样 的 选 
择 器 ， 或 者 在 这 个 例子 中 使 用 ul ul ol 1i 直 
接 定位 项 目 列表 。 


除了 上 述 方法 以 外 ， 也 可 以 为 每 个 
误 套 列表 添加 类 名 ， 再 设置 对 应 的 样式 。 
图 15.7.2 中 设置 的 方法 允许 我 们 可 以 在 不 改 
变 HTML 的 情况 下 控制 样式 。 


6 无 论 谱 套 的 层级 是 哪 一 级 ， pt 
在 默认 情况 下 总 是 使 用 阿拉 伯 数 字 (1、 


3 ) 。 可 以 使 用 list-style-type 指 a 大 
编号 方案 (参见 15.4 节 ) 。 根 据 The Chicago 
Manual of Style 一 书 的 建议 ， 正 确 的 列表 诅 套 
次 序 为 1( 罗马 数字 ) 、A、1、a (此 后 交替 
使 用 1 和 a 编号 方案 ) 。 
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该 面包 悄 导 航 使 用 有 序列 表 进 行 标记 ， 用 于 指示 当前 页 面 在 整个 网 站 





链接 ， 但 最 后 一 个 不 是 链接 ， 因 为 用 户 所 在 的 页 面 正 是 The 


默认 情况 下 ， 对 于 无 序列 表 ， 第 一 
列表 使 用 圆 点 符号 ， 下 一 级 列表 使 用 空心 贺 
圈 符 号 ， 第 三 级 及 后 续 各 级 列表 使 用 方块 符 
号 。 类 似 地 ， 可 以 使 用 list-style-type 指定 
希望 使 用 的 符号 类 型 (参见 15.2 节 )。 


由 于 列表 项 目 (1i 元素 ) 可 以 谈 套 
在 其 他 列表 项 目 内 ， 因 此 在 使 用 相对 值 指定 
Oe ee eet rl bn 
size: .75em; } 这 样 的 样式 规则 ， 那 么 最 外 层 
列表 项 目的 字体 大 小 便 是 其 父 元 75%， 
因此 如 果 该 父 元 素 的 字体 大 小 为 默认 的 16 像 
素 ， 那 么 最 外 层 列 表 项 目 就 是 12 像素 大 小 ， 
这 还 算 好 。 As 第 一 个 能 套 列 表 项 目的 
字体 大 小 会 是 其 父 元 素 ( 第 一 个 列表 项 目 ， 
ee 
每 一 级 都 会 迅速 让 情况 变 得 更 糟糕 。 一 种 解 
决 方案 是 添加 1i 1i {font-size: 1em;}， 如 
图 15.7.2 所 示 (或 者 将 lem 替换 为 100% ) 。 
这 样 ， 谱 套 列表 项 目 就 总 是 与 顶级 列表 项 目 
一 样 大 ， 如 图 15.7.3 所 示 。 (由 Eric Meyer 


提供 ，www.meyerweb.com。 ) 
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使 用 骨 套 列表 创建 下 拉 式 导航 


误 套 列表 的 一 种 使 用 场合 是 创建 下 拉 式 (或 飞 出 式 ) 导航 菜单 (如 图 15.7.4 所 示 )。 通 
过 使 用 CSS 为 导航 添加 一 些 样式 ， 可 以 让 每 个 子 菜单 仅 在 访问 者 鼠标 停留 在 其 父 元 素 的 列表 
项 目 上 时 显示 出 来 (如 图 15.7.5 所 示 ) ， 并 在 访问 者 将 鼠标 移 走 时 隐藏 。 

可 以 通过 多 种 方法 实现 这 一 效果 ， 但 这 些 方 法 总 离 不 开 在 选择 器 中 使 用 :hover 伪 类 以 显 
示 子 菜单 。 下 面 演示 了 这 样 一 种 在 默认 情况 下 隐藏 上 诅 套 列表 ， 并 在 访问 者 鼠标 停留 时 显示 该 


列表 的 方法 : 


RS 

.nav .subnav { 
left: -999em; /* 将 子 菜单 移出 屏幕 */ 
position: absolute; 


z-index: 1000; 


和 
.nav li:hover .subnav { 

left: auto; /* 让 子 菜单 回 到 自然 状态 */ 
| 


对 应 的 HTML 如 图 15.7.4 所 示 。 要 实现 水 平 排 布 ， 移 除 列表 项 目的 符号 ， 以 及 对 外 观 进 
行 调整 ， 都 需要 使 用 更 多 的 CSS。 图 15.7.5 中 所 示 页 面 的 完整 HTML 和 CSS 代码 见 本 书 配 
套 网 站 www.htmlcssvqs.com/8ed/15/dropdown-nav。 我 还 在 代码 中 添加 了 一 些 注释 。 

可 以 使 用 类 似 的 方法 创建 市 飞 出 式 子 菜单 的 重 直 导航 〈 子 菜单 显示 在 性 航 的 侧 边 ) 。 


15.8 创建 描述 列表 


HTML 提供 了 专门 用 于 描述 成 组 出 现 
的 名 称 ( 术语 ) 及 其 值 之 间 关 联 的 列表 类 
型 。 这 种 类 型 在 HTML5 中 称 为 描述 列表 
( description list ) ， 而 在 HTML 的 早期 版 本 
中 则 称 为 定义 列表 。 

根据 HIML5 规范 ，“ 由 名 称 及 其 值 构 
成 的 组 合 可 以 是 术语 和 定义 、 元 数据 主题 和 
值 、 问 题 和 答案， 以 及 任何 其 他 的 名 -- 值 


组 。” 每 个 列表 都 包含 在 抽 中， 其 中 的 每 个 
名 一 值 组 都 有 一 个 或 多 个 中 元 系 (名称 或 术 
语 ) 以 及 一 个 或 多 个 dd 元 素 (它们 的 值 ) 。 
图 15.8.1 展示 了 一 个 基本 的 描述 列表 示例 。 
除了 使 用 一 个 简单 的 样式 规则 ( 如 图 15.8.2 
所 示 ) 应 用 粗 体 以 外 ， 所 有 的 样式 都 是 默认 
的 (如 图 15.8.3 所 示 ) 。 
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<body> 
<h1i>List of Horror Movie Legends</h1> 


<dl> 
<dt>Boris Karloff</dt> 


<dd>Best known for his role in <cite>Frankenstein</cite> and related horror films, this 
scaremaster's real name was William Henry Pratt.</dd> 


<dt>Christopher Lee</dt> 


<dd>Lee took a bite out of audiences as Dracula in multiple Hammer horror classics.</dd> 


。 [更 多 恶 怖 传说 |] ... 
</d1> 


</body> 
</htm]> 








15.9.| 














这 是 最 基本 的 摘 述 列表 ， 每 个 名 - 值 组 都 由 一 个 dt 和 一 个 dd 构成 。 每 个 组 之 间 的 空 行 仅仅 是 


为 了 提高 代码 的 可 读 性 而 添加 的 。 这 些 空 行 不 是 必需 的 ， 它 们 不 改变 内 容 的 含义 ， 也 不 影响 内 容 的 呈现 


dt { 
font-weight: bold; 
} 


15.8.2 ”你 可 能 想 为 由 元 素 中 的 术语 添加 一 些 
格式 ， 从 而 让 它们 突出 显示 (参见 图 15.8.3 ) 


Description List 
Description List 


Horror Movie Legends 


Boris Karloff 


Best knowrn for his role in Frankenstein 

and related horror films, this scaremaster's 

real name was William Henry Pratt. 
Christopher Lee 

Lee took a bite out of audiences as Dracula 

in multiple Hammer horror classics. 





15.8.3 在 默认 情况 下 ， 名 称 〈dt ) 癌 左 对 齐 ， 
而 值 (dd ) 则 有 缩 进 。 由 于 图 15.8.2 中 设置 的 简单 
样式 ， 名 称 以 粗 体 显示 。 如 果 没 有 设置 该 样式 ， 它 
们 将 以 常规 文本 显示 


以 下 都 是 dl 元 素 内 的 dt 和 dd 元 素 的 组 








合 ， 这 些 安排 都 是 有 效 的 。 
D 一 个 dt 同一 个 dd (参见 图 15.8.1， 同 
时 参见 图 15.8.7 中 Cast 下 髓 套 描述 列 
表 中 的 Director ) 。 这 是 最 常见 的 情形 。 
口 一 个 dt 同 多 个 dd 元素， 参见 图 15.8.7 
中 的 Writers 。 
口 多 个 性 元素 同一 个 dd， 如 图 15.8.4 所 
示 。【( 样 式 设 置 的 示例 如 图 15.8.5 和 
图 15.8.6 所 示 。 ) 
口 多 个 尼 元 系 同 多 个 元 系 。 如 末 
图 15.8.4 中 的 bogeyman/boogeyman 有 
多 个 定义 ， 就 是 这 种 情形 。 
可 以 使 用 dfn 元 素 包 半生 中 的 名 称 ， 指 
出 该 列表 是 用 于 定义 术语 的 , 如 在 术语 表 中 ， 
如 图 15.8.4 所 示 。( 关于 dfn， 参见 4.9 市 。) 
可 以 对 描述 列表 进行 艇 僚 ( 如 图 15.8.7 
所 示 ), 并 通过 CSS 对 它们 添加 所 需 的 样式 ( 如 
图 15.8.8 所 示 ) 。 在 默认 情况 下 ， 如 果 一 个 
dl 黄 僚 在 为 一 个 d1 中 ， 它 会 目 动 进行 缩 进 ， 
如 图 15.8.9 所 示 ( 当然 也 可 以 通过 CSS 对 此 
进行 修改 ) 。 
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<body> 


<h1i>Defining words with multiple spellings</h1> 


<dl> 
<dt><dfn>bogeyman</dfn>, n.</dt> 
<dt><dfn>boogeyman</dfn>,，n.</dt> 
<dd>A mythical creature that lurks under 
the beds of small children.</dd> 


<dt><dfn lang="en-gb">aluminium 
</dfn>, n.</dt> 
<dt><dfn>aluminum</dfn>,n.</dt> 
<dd>...</dd> 
</dl> 
</body> 
</html> 








15.8.4 在 这 个 例子 中 ， 每 个 名 - 值 组 都 包含 多 
个 dt 和 一 个 dd， 因 为 这 些 术 语 有 一 个 以 上 的 拼写 
方式 ， 而 它们 的 定义 是 相同 的 





dd + dt { 
margin-top: 1em; 
} 








15.8.5 ”这 会 在 每 个 名 - 值 组 之 间 添 加 比 默认 设 
置 更 多 的 空间 


个 局 向 Description List with Muiltiple dts 


1 Description List with Multiple dts 


Defining words with 
multiple spellings 


bogeyman, n. 

boopeyman, n. 
A mythical creature that lurks under 
the beds of small children. 


lupininm, h. 
aiuminum, n. 


图 15.8.6 ”现在 可 以 清楚 地 看 到 各 组 描述 之 间 的 
间 阳 了 。 由 于 aluminium, n. 所 在 的 dt 紧 跟 在 上 一 
名 一 值 组 中 的 dd 后面 ， 因 此 图 15.8.5 中 的 样式 规 
则 发 挥 了 作用 











创建 描述 列表 的 步骤 

( 输入 <dl>。 

(2) 输入 <dt>。 

(3) 输入 需要 摘 述 或 定义 的 单词 或 短语 ， 
包括 任何 额外 的 语义 元 系 ( 如 dfn) 。 

(4) 输入 </dt> 以 完成 名 -- 值 组 中 的 名 称 部 分 。 

(5) 如 果 名 一 值 组 中 有 一 个 以 上 的 名 称 或 
术语 , 可 根据 需要 重复 第 (2) 步 至 第 (4) 步 ( 参 
见 图 15.8.4)。 











<body> 


<h1i>Credits for <cite>Améliex</cite></h1> 


<dl> 
<«dt>Director</dt> 
«dd>Jean-Pierre Jeunet</dd> 


<dt>Writers</dt> 

<dd>Guillaume Laurant (story, 
screenplay)</dd> 

<¢dd>Jean-Pierre Jeunet (story)</dd> 


<«dt>Cast</dt> 
<dd> 
<1-- 开始 谋 套 列表 --> 
<d]> 
<dt>Audrey Tautou</dt> 
<dd>Amelie Poulain</dd> 


<dt>Mathieu Kassovitz</dt> 
<dd>Nino Quincampoix</dd> 


. [rest of Cast|] ... 
</d1> 
<!-- 结束 误 套 列表 --> 
《</dd> 


。 [其 他 致谢 名 单 ] ... 
</d1> 


</body> 
</htm]> 





15.8.7 这 是 一 个 描述 列表 的 例子 ， 它 描述 了 一 
部 电影 的 导演 、 编 剧 和 演员 表 ， 其 中 的 演员 表 是 由 
演员 姓名 及 其 角色 构成 的 能 套 描述 列表 。 可 以 根据 
需要 对 骨 套 的 列表 设置 不 同 的 样式 ( 如 图 1$.8.8 所 示 ) 
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(6) 输入 <dd>。 
(7) 输入 第 (3) 步 中 输入 的 术语 或 名 称 的 


摘 述 。 

(8) 输入 </dd> 以 完成 名 一 值 组 中 的 描述 
( 值 ) 部 分 。 

(9) 如 采 名 一 值 组 中 有 一 个 以 上 的 定义 值 ， 
可 根据 需要 重复 第 (6) 步 至 第 (8) 步 〈 人 参见 
图 15.8.7 中 的 Writers ) 。 

(10) 对 每 个 由 术语 和 描述 构成 的 组 ， 重 
复 第 (2) 步 至 第 (9) 步 。 

(11) 输入 </dL> 以 完成 整个 摘 述 列表 。 








body { 
font-family: Verdana, Geneva, sans-serif; 


} 


h1 { 
font-size: 1.75em; 


} 


dt { 
font-weight: bold; 
text-transform: uppercase; 


} 


/* 为 位 于 另 一 个 dl 中 的 任意 dl 的 dt 设置 样式 */ 
dl dl dt { 

text-transform: none; 
} 


dd + dt{ 
margin-top: 1em; 


} 





图 15.8.8 ”我 想 对 主要 列表 中 的 术语 和 骸 套 列表 中 
的 术语 进行 区 分 ， 因 此 我 对 dt 元 又 使 用 了 大 写字 
母 样 式 ， 再 将 位 于 瞬 套 dl 中 的 dt 元 素 重 新 设 为 党 
规 样式 (使 用 text-transform: none; 声明 ) ,不 
过 ,注意 所 有 的 术语 均 以 粗 体 显 示 ( 如 图 15.8.9 所 
示 ) ， 这 是 因为 第 一 条 样式 规则 中 的 声明 适用 于 所 
有 的 入 元 率 ， 同 时 并 未 在 般 套 列表 的 样式 中 清除 
这 = 和 起 
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Nested Description List 
Nested Description List 


Credits for Ameélie 


DIRECTOR 
Jean-Pierre Jeunet 


WRITERS 
Guillaume Laurant (story, screenplay) 
Jean-Pierre Jeunet (story) 


CAST 
Audrey Tautou 
Amelie Poulain 


Mathieu Kassovitz 
Mino Quincampoix 


图 15.8.9 ”在 默认 情况 下 ， 当 一 个 dd 艇 套 在 田 
一 个 dl 中 时 ， 般 套 的 列表 会 目 动 进行 缩 进 。 根 据 
图 15.8.8 中 的 样式 , 第 一 级 路 元 素 使 用 大 写字 母 ， 
而 攀 套 列表 中 的 dt 元 素 则 使 用 常规 样式 。 所 有 的 
dt 元 素 均 以 粗 体 显 示 














6 对 于 描述 ( 值 ) ， 浏 览 器 通常 会 在 
其 术语 (名称) 下 面 新 的 一 行 对 其 进行 缩 进 
(参见 图 15.8.3 ) 。 可 以 通过 自 定义 dd 元 素 
的 margin-left 值 改 变 缩 进 。 如 dd { margin- 
lefts 0 


} 会 将 描述 跟 术 语 左 对 齐 。 


你 应 该 已 经 在 示例 (图 15.8.1、 

图 15.8.4、 图 15.8.7 ) 中 看 到 ,不 必 ( 更 确切 地 说 ， 
不 应 该 ) 使 用 pp 元素 对 dd 元素 中 的 单个 文本 
段落 进行 标记 。 不 过 ， 如 果 单 个 描述 是 由 一 
个 以 上 的 段落 构成 的 ， 就 应 该 在 一 个 dd 元素 
中 使 用 多 个 pp 元素 对 其 进行 标记 ， 而 不 是 将 
每 个 段落 ( 不 使 用 p 元 素 ) 放 入 单独 的 dd。 
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本 章 内 容 

D HTML5 对 表单 的 改进 

口 创建 表单 

口 处 理 表 单 

口 对 表单 元 素 进行 组 织 

口 创建 文本 框 

口 为 表单 组 件 添加 标签 

口 创建 密码 框 

口 创建 电子 邮件 杠 、 搜 索 框 、 电 话 框 和 
URL 框 

口 创建 单 选 按 钮 

口 创建 复 选 框 

口 创建 文本 区 域 

口 创建 选择 框 

口 让 访问 者 上 传 文件 

口 创建 隐藏 字段 

口 创建 提交 按钮 

口 禁用 表单 元 素 

口 根据 状态 为 表单 设置 样式 











到 目前 为 止 ， 你 学 到 的 所 有 HTML 都 是 
用 于 帮助 你 将 自己 的 想法 告诉 访问 者 的 。 在 
本 童 中 ， 你 将 学 习 如 何 创建 表单 ， 与 访问 者 
进行 区 六 。 

表单 有 两 个 基本 组 成 部 分 : 访问 者 在 页 
面 上 可 以 看 见 并 填写 的 控件 、 标 签 和 按钮 的 
集合 ; 以 及 用 于 获取 信息 并 将 其 转化 为 可 以 
读 取 或 计算 的 格式 的 处 理 脚 本 。 本 章 主 要 关 








注 第 一 部 分 : 创建 表单 。 本 书 配套 网 站 上 提 
供 了 许多 示例 脚本 ， 参 见 www.htmlcssvqs. 
com/8ed/form-scripts。 

构造 表单 的 字段 和 按钮 很 直观 ， 同 创 
建 网 页 的 其 他 部 分 是 相似 的 。 基 本 的 表单 字 
段 类 型 包括 文本 框 、 单 选 按钮 、 复 选 框 、 下 
拉 沫 单 、 更 大 的 文本 区 域 。 如 有 果 你 曾 在 网 上 
购 过 物 ， 曾 加 入 过 社交 网 络 ， 或 撰写 过 基 
于 Web 的 电子 邮件 ， 那 么 你 会 很 熟悉 即将 在 
这 里 学 到 的 表单 元 系 。 我 还 会 演示 如 何 使 用 
CSS 设置 表单 的 样式 。 


16.1 HTML5 对 表单 的 改进 


如 有 果 你 没有 接触 过 表单 ， 最 好 先 跳 过 本 
节 ， 待 束 悉 本 章 其 余 内 容 之 后 再 回 过 头 来 阅 
这 本 
HTMLS 的 一 个 重要 的 特性 就 是 对 表单 的 
改进 。 过 去 ,我们 常常 需要 花费 很 多 额外 的 
时 间 ， 编 写 JavaScript 以 增强 表单 行为 一 一 例 
如 ， 要 求 访 问 者 提交 表单 之 前 必须 填写 某 个 
字段 。HTML5 通过 引入 新 的 表单 元 素 、 输 入 
类 型 和 属性 ， 以 及 内 置 的 对 必 填 字段 、 电 子 
邮件 地 址 、URL 以 及 定制 模式 的 验证 ， 让 这 
一 切 变 得 很 轻松 。 这 些 特性 不 光 帮 助 了 设计 
人 员 和 开发 人 员 ， 也 让 网 站 访问 者 的 体验 有 
了 很 大 的 提升 。 

更 妙 的 是 ， 不 文 持 这 些 新 特性 的 旧版 浏 
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览 右 也 不 会 出 太 大 的 问题 。 它 们 会 直接 忽略 表 16.1.1 和 表 16.1.2 总 结 了 HTML5 大 部 
这 些 无 法 理解 的 属性 ， 表 单 里 的 输入 框 也 会 ” 分 与 表单 相关 的 特性 ， 并 指出 了 如 何 获取 更 
正常 显示 。 如 果 你 希望 它们 拥有 HTML5 行 为 ， ”多 信息 。 你 将 看 到 ， 我 们 会 将 重点 放 在 最 党 
可 以 使 用 JavaScript 填补 空白 ， 就 像 过 去 那样 ” 使 用 的 那些 特性 上 面 。 

(参见 最 后 一 条 提示 ) 。 











表 16.1.1 输入 和 元 素 





输入 或 者 元 素 简略 代码 更 多 信息 
电子 邮件 框 <input type="email"> 
搜索 框 <input type="search"> 
参见 16.8 贡 
电话 框 <input type="tel"> 
URL 框 <input type="url"> 
以 下 元 素 得 到 了 部 分 浏览 器 的 支持 
日 期 <input type="date"> 更 多 信息 参见 : www.wufoo.com/html5 
沼 全 这 3 un nu 浏览 硕 支 持 : 
数字 <input type= number > caniuse.com/#feat=input-datetime 
范围 <input type="range"> caniuse.com/#feat=input-number 


caniuse.com/#feat=input-range 


<input type="text" name="favfruit" 
liste fruit” /> 
<datalist id="fruit"> 
数据 列表 <option>Grapes</option> 更 多 信息 参见 : www.wufoo.com/html5 
<option>Pears</option> 
<option>Kiwix</option> 


</datalist> 
下 面 的 输入 或 者 元 素 得 到 的 支持 很 少 ，W3C 指出 它们 在 2014 年 定案 之 时 很 可 能 不 会 列 入 HTML5 
颜色 <input type= Color”/> www.w3.org/html/wg/wiki/HTMLS.0AtRiskFeatures 
全 局 日 期 和 xinput type="datetime"” /> 
时 间 
局 部 日 期 和 <input type="datetime-local" /> 更 多 信息 参见 : www.wufoo.com/html5 
时 间 浏览 入 文 持 : 

. ， ， caniuse.com/#feat=input-color 

月 SNpuE ‘Type Mom, caniuse.com/#feat=input-datetime 
时 间 <input type="time" /> 
周 <input type="week" /> 
输出 <output></output> 
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320 第 16 章 表单 
表 16.1.2 属性 
属 性 J 结 更 多 信息 

accept 限制 用 户 可 上 传 文件 的 类 型 www.wufoo.comyhtml5 
autocomplete 如 果 对 form 元 素 或 特定 的 字段 添加 autocomplete="off"， 就 会 j6 3 

关闭 浏览 器 的 对 该 表单 或 该 字段 的 自动 填写 功能 。 默 认 值 为 on 上 
autofocus 页 面 加 载 后 将 焦点 放 到 该 字段 16.5 3 
multiple 人 允许 输入 多 个 电子 邮件 地 址 ， 或 者 上 传 多 个 文件 16.8 节 


]ist 将 datalist 与 input 联系 起 来 


www.wufoo.comyhtml5 




















maxlength 指定 textarea 的 最 大 字符 数 ( 在 HIMLS 之 前 的 文本 框 就 支持 1611 节 
该 特性 ) 
pattern 定义 一 个 用 户 所 输入 的 文本 在 提交 之 前 必须 遵循 的 模式 16.8 市 
placeholder 指定 一 个 出 现在 文本 框 中 的 提示 文本 ， 用 户 开始 输入 后 该 文本 16.5 节 
消失 
required 需要 访问 者 在 提交 表单 之 前 必须 完成 该 字段 16.5 节 
formnovalidate 关闭 HIMLS 的 自动 验证 功能 。 应 用 于 提交 按钮 16.15 节 
novaligate 关闭 HTML5 的 自动 验证 功能 。 应 用 于 表单 元 素 1 
一 量 . jy 说 明 标 签 、 欣 件 和 ， 如 图 16.2.1 所 示 。 
对 于 浏览 器 支持 信息 ，caniuse.com 上 四 的 膏 明 标签 、 控 件 和 按钮 ,如 图 所 不 


的 信息 通常 比 www.wufoo.com/html5 上 的 更 
新 一 些 ， 不 过 后 者 仍然 是 有 关 HTMLS5 表单 信 
息 的 一 个 重要 资源 。 


那些 有 可 能 不 会 成 为 HITMLS 一 部 分 
的 表单 元 素 ， 也 有 可 能 被 收录 到 HTML 5.1 的 
最 终 版 本 (预计 2016 年 发 布 ) 。 


Ryan Seddon 的 HSF (https://github. 
com/ryanseddon/H5F ) 可 以 为 旧 的 浏览 器 提供 


模仿 HTMLS5 表单 行为 的 JavaScript 方案 。 


16.2 创建 表单 


每 个 表单 都 以 form 开始 标签 开始 ， 以 
form 结束 标签 结束 。 两 个 标签 之 间 是 组 成 表 


(注意 ， 我 会 交替 使 用 控件 ( control ) 和 字段 
(field ) 两 个 词 。) 每 个 控件 都 有 一 个 name 
属性 ， 用 于 在 提交 表单 时 对 数据 进行 识别 。 
访问 者 通过 你 提供 的 提交 按钮 提交 表单 一 一 
触发 提交 按钮 时 ， 他 们 十 写 的 数据 就 会 发 送 
至 服务 器 上 处 理 数 据 的 脚本 。 

了 解 了 表单 的 全 貌 之 后 ， 不 妨 仔 细 看 看 
其 中 的 细节 。form 开始 标签 可 以 有 一 些 属 
性 ， 其 中 最 重要 的 就 是 action 和 method (如 
图 16.2.1 所 示 ) 。 

将 action 属性 的 值 设 为 访问 者 提交 表单 
时 服务 器 上 对 数据 进行 处 理 的 脚本 的 URL。 
例如 ，action="save-info.php"。 

method 属性 的 值 要 么 是 get， 要 么 是 
post。 大 多 数 情 况 下 都 可 以 使 用 post， 不 过 
每 种 方法 都 有 其 用 途 ， 了 解 其 用 途 有 助 于 理 
解 它 们 。 更 多 细 市 参见 本 市 的 补充 材料 。 
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<body> 
<h1i>Create a New Account</h1> 
<form method="post" action="show-data.php"> 
<!-- 各 种 表单 元 素 --> 
<fieldset> 
<h2 class="hdr-account">Account</h2> 


<div class="fields"> 
<p class="row"> 
<label for= first-name >First Name:</label> 
<input type= text ”id= first-name”name= first_name” class="field-large” /> 
</p> 
<p class="row"> 
<label for= ]ast-name >Last Name:</label> 
<input type= text ”id= ]ast-name ”name= ]ast_name ”Class= field-]arge” /> 
</p> 


</div> 
<«/fieldset> 


<1-- 提交 按钮 --> 

<input type="submit" value="Create Account" class="btn" /> 
</form> 
</body> 
</html> 











16.2.1 每 个 表单 包括 form 元 素 目 刁 、 访 问 者 输入 信息 的 其 他 表单 元 素 以 及 用 于 将 收集 到 的 信息 发 送 
给 服务 右 的 提交 按钮 





和 和 由 DE 
ea a 图 16.2.1 和 图 16.2.2 中 完整 的 HTML 
(1) 输入 We eo formmethod", 这 和 CSS 代码 可 以 从 本 书 配套 网 站 下 载 (www 
里 的 formmethod 征 get 或 者 post。 htmlcssvqs.com/8ed/16) ， 其 中 部 分 代码 会 


(2) 输入 action="script.ur1">， 这 里 的 贯穿 本 章 。 此外， 配套 网 站 上 还 有 表单 在 
script.ur] 是 提交 表单 时 要 运行 的 脚本 在 服 action 属性 中 引 用 的 show-data.php 脚本 。， 学 











务 带 上 的 位 置 。 本 习 本 章 过 程 中 ， 你 可 以 随意 使 用 它 来 测试 你 
(3) 根据 从 16.5 Deda, 创建 的 表单 。 需要 注意 的 是 ， 除非 你 的 服务 器 安 
表单 的 内 容 ( 包括 一 | 提交 按钮 ) O 装 了 PHP, 否则 这 个 脚本 不 工作 。 


(4) 输入 </form> 以 结束 表单 。 


可 以 使 用 CSS 布局 表单 元 素 ， 参 见 可 以 对 form 元 素 应 用 novalidate 
图 16.2.2。 此 处 演示 的 这 个 贯穿 本 章 的 表单 示 。 属性 ， 关 闭 表 单 的 HTML5 验证 特性 (本 
例 显示 在 浏览 器 中 如 图 16.2.3 所 示 。 章 后 面 会 演示 这 一 特性 )。 例 如 <form 
~ method="post" action="show-data.php" 


novalidate>, 
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fieldset { 
background-color: #f1f1f1; 
border: none; 
border-radius: 2px; 
margin-bottom: 12px; 
overflow: hidden; 
padding: 0 .625em; /* 10px */ 


Create a New Account 





First Name: | 





Last Name: 


} 


.fields { 
background-color: #fff; 
border: 1px solid #eaeaea; 
margin: .75em; /* 12px */ 
padding: .75em; 


Email: youmame@example.com 


Password: | 





Re-enter Password; 


ADDRESS 


Street Address: 





} 





City: mi 


State: | Alabama :| 


.fields .row { 
margin: 0.5em 0; ZIP Code: 


} 


label { 
cursor: pointer; 
display: inline-block; 
padding: 3px 6px; 
text-align: right; 
width: 150px; 
vertical-align: top; 


PUBLIC PROFILE 


Piloture; | Browse... 
Maximum size of 7O0k. JPG, GIF or PNG. 





Screen Name: 





Website URL: http://www.example.com 


Have a homepage or a blog? Put the adgdress here, 
beginning with http: // orhttps://. 


lL 





input, select, button { 
font-size: inherit; 








lb 


/* 各 种 表单 字段 的 宽度 */ 
.field-small { 
width: 75px; 





: (, Male 
DD, Female 


} 


.field-medium { 
width: 150px; 


口上 is okay to email me with messages from other users. 


D ltisokay to email me with occasional promotions about our other 
products. 


Create Account 


| 16.2.3 这 是 本 章 讨 论 的 完整 的 New Account 


16.2.2 这 是 用 于 对 表单 进行 格式 化 的 样式 表 的 。 ”表单 
一 部 分 。 完 整 的 样式 表 见 本 书 的 配套 网 站 


} 


.field-large { 
width: 250px; 
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前 面 提 到 ，form 元 素 的 method 属性 要 么 是 get， 要 么 是 post。 
如 果 对 表单 使 用 method="get"， 那 么 表单 提交 后 ， 表 单 中 的 数据 会 显示 在 浏览 器 的 地 址 


栏 里 。 通 常 ， 如 果 你 希望 表单 提交 后 从 服务 器 


学 都 会 在 搜索 表单 中 使 用 get 





得 到 信息 ， 就 使 用 get。 例 如 ， 大 多 数 搜索 引 
输入 Kermit meets Yoda， 提 交 表 单 ， 搜 索引 擎 会 得 到 搜索 


结果 。 由 于 数据 出 现在 URL 中 ， 因 此 用 户 可 以 保存 搜索 查询 ， 或 者 将 查询 发 给 朋友 。 


如 果 对 表单 使 用 method="post"， 
DE 


post 用 于 向 服务 器 存 入 数据 ,而 非 获 取 数 据 ,。 因 此 ,如 果 需 要 在 数据 库 中 保存 、 添 加 和 删除 


那么 提交 表单 后 ， 表 单 中 的 数据 不 会 显示 在 浏览 器 的 地 
同时 ， 比 起 get， 使 用 post 可 以 向 服务 器 发 送 更 多 的 数据 。 通 常 ， 


数据 ， 


就 应 选择 post。 例 如 ,电子 商务 网 站 使 用 post 保存 信用 卡 、 邮 件 地 址 以 及 其 他 用 户 输 入 的 信息 。 
通常 ， 如 果 不 确定 使 用 哪 一 种 ， 就 使 用 post， 这 样 数据 不 会 暴露 在 URL 中 。 


16.3 “处理 表单 


表单 从 访问 者 那里 收集 信息 ， 脚 本 则 对 
这 些 信息 进行 处 理 。 脚 本 可 以 将 信息 记录 到 
服务 右上 的 数据 库 里 ,通过 电子 邮件 发 送信 
上 县， 或 者 执行 很 多 其 他 的 功能 。 

有 很 多 语言 都 可 以 用 于 编写 表单 处 理 脚 
本 。 对 于 刚 起 步 的 新 手 ，PHP 是 个 不 错 的 选 
择 , 因为 用 它 处 理 一 些 背 见 任务 很 简单 。 而 且 ， 
有 很 多 关于 PHP 的 书籍 、 在 线 教程 、 论 坛 帮 
你 学 习 。 关 于 PHP 的 内 容 超 出 了 本 书 的 范围 ， 
不 过 我 在 www.htmlcssvgs.com/8ed/form-scripts 
提供 了 两 个 基本 的 示例 脚本 ( 如 图 16.3.1 所 示 )。 

















Processing Form Data 


Processing Form Data 
Fisld Name Value(s) 
first nare Rose 


Wood 


last name 








图 16.3.1 本 书 配 套 网 站 演示 的 脚本 之 一 是 show- 
data.php。 这 里 是 它 的 一 部 分 ， 提 交 表 单 后 ， 它 会 
将 用 户 填写 的 所 有 字段 的 名 和 值 显示 出 来 。 另 一 个 
脚本 〈email-data.php ) 会 将 表单 数据 发 送 至 脚本 中 
指定 的 电子 邮件 地 址 











除了 PHP， 我 们 还 可 以 选择 其 他 语言 ， 
如 Django (一 个 使 用 Python 的 框架 ) 、Ruby 
on Rails、ASPNET JSP( JavaServer Pages ) 等 。 


表单 安全 性 

从 服务 器 接收 数据 尤其 需要 注意 安全 
性 。 不 要 对 数据 作 任 何 假 设 ， 因 为 即便 对 
表单 建立 了 安全 措施 ， 坏 人 也 可 以 创建 他 
们 自己 的 表单 ， 调 用 你 的 脚本 并 发 送 无 数 
站 
损坏 服务 器 上 的 数据 。 保 护 表 单 是 个 前 沿 
主题 ， 我 在 www.htmlcssvqs.comy/8ed/form- 
Security 提供 了 一 些 链接 。 


表单 验证 

表单 验证 指 的 是 提交 表单 时 ， 对 用 户 输 
入 的 每 个 字段 的 内 容 进 行 检 查 ， 看 是 否 符 合 
预期 的 格式 〈 例 如 ， 对 于 电子 邮件 字段 ， 检 
查 输入 是 否 为 正确 的 电子 邮件 地 址 格式 ) 。 
先前 提 到 ， 有 的 表单 元 杂 有 内 置 的 验证 功 
能 。 有 的 网 站 使 用 JavaScript 进行 验证 (网 
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上 有 相关 的 教程 和 代码 ) 。 这 些 都 不 能 完全 
蔡 代 服务 需 端 验证 ， 因 为 旧 的 浏览 套 或 禁用 
JavaScript 的 浏 览 奉 不 会 执行 客户 半 验 证 。 进 
行 服务 硕 端 验证 也 是 出 于 安全 性 考虑 〈 人 参见 
前 面 的 补充 材料 “表单 安全 性 ”) 。 和 总 之 ， 
必须 考虑 将 服务 融 端 的 验证 加 入 表单 处 理 
脚本 。 

















服务 器 端 与 客户 端 

PHP 是 一 种 服务 器 端 (server-side ) 
语言 ， 这 意味 着 它 运 行 于 为 网 页 服务 的 计 
算 机 ( 称 为 服务 器 ) ， 而 不 是 查看 网 页 的 
访问 者 的 计算 机 。 脚 本 必须 上 传 到 服务 器 
上 才能 发 挥 作 用 ， 这 通常 跟 你 托管 网 页 、 
图 像 等 用 的 是 同一 个 服务 器 ( 相关 内 容 参 
Dol <AN A 
PHP 才能 对 脚本 进行 解释 。 大 多 数 Web 主 
机 都 为 你 安装 了 PHP， 因 此 很 容易 找到 支 
持 PHP 的 服务 器 。 专 业 网 站 的 很 多 功能 (如 
存储 数据 、 发 送 电子 邮 件 等 ) 都 需要 服务 
0 

客户 端 (client-side ) 语言 ( 如 HTML 
和 CSS ) 是 在 浏览 器 中 运行 的 。JavaScript 
是 另 一 种 客户 端 语言 (也 可 以 用 在 服务 器 
JV 
情况 下 执行 很 多 任务 。 例 如 ， 可 以 使 用 
JavaScript 在 提交 表单 前 检查 是 否 所 有 数据 
都 已 填写 ， 以 及 其 他 不 需要 服务 器 (或 在 
涉及 服务 器 之 前 ) 的 任务 。 


16.4 ”对 表 早 元 素 进 行 组 织 


如 果 表 单 上 有 很 多 信息 需要 填写 ， 可 以 
使 用 fieldset 元 系 将 相关 的 元 系 组 合 在 一 起 ， 
使 表单 更 容易 理解 。 表 单 越 容 易 让 访问 者 理 











解 ， 访 问 者 就 越 有 可 能 正确 地 填写 表单 。 还 
可 以 使 用 legend 元 素 为 每 个 fieldset 提供 一 
个 标题 (caption ) ， 用 于 描述 每 个 组 的 目的 ， 
有 时 这 些 描述 还 可 以 使 用 hi ~ h6 标题 ， 如 
图 16.4.1 所 示 。 对 于 一 组 单 选 按钮 (参见 
16.9 节 ) ，legend 元 素 尤 其 重要 ， 因 为 通常 
如 条 不 配合 使 用 legend， 单 选 按钮 《参见 
16.9 方 ) 就 没有 明显 的 上 下 文 。 

即便 不 添加 任何 CSS， 浏览 器 也 会 让 
哪些 控件 属于 哪个 fieldset 显得 相当 清晰 
(如 图 16.9.2 所 示 ) 。 当 然 ， 你 可 以 自己 为 
fieldset 和 legend 添加 样式 ， 从 而 让 表单 更 
吸引 人 ， 更 便于 使 用 (如 图 16.9.3 和 图 16.9.4 
所 示 ) 。 


对 表单 元 素 进行 组 织 的 步骤 

(1) 在 form 开始 标签 的 下 面 、 任 何 希 望 
包含 在 第 一 个 组 的 表单 元 素 的 上 面 ， 输 入 
<fieldset>, 

(2) 如 果 需 要 ， 输 入 《legend>。 ( 如 果 需 
要 包含 legend， 它 必须 是 fieldset 里 的 第 一 
个 元 条 8 ) 

(3) 输入 标签 的 文本 。 

(4) 输入 </legend> 以 完成 标签 。 

(5) 如 果 不 使 用 legend， 则 创建 一 个 标题 
从 而 可 以 识别 属于 该 fieldset 的 一 组 控件 。 

(参见 补充 材料 “legend 元 隶 、 标 题 、 屏 和 达 

阅读 各 和 样式 ”。 ) 

(6) 创建 属于 第 一 组 的 表单 元 素 ， 更 多 信 
县 参见 从 16.5 节 开 始 讲解 的 知识 。 

(7) 输入 </fieldset> 结束 第 一 组 表单 
J 

(8) 为 每 一 组 表单 元 素 重 复 第 (1) 步 至 第 
(07) 步 。 
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<h1i>Create a New Account</h1> 
<form method="post" action="show-data.php"> 
<fieldset> 
<h2 class="hdr-account">Account</h2> 
..。Account 人 字段.. 
</fieldset> 


<fieldset> 
<h2 class="hdr-address">Address</h2> 
..。Address 字 段 ... 

</fieldset> 


<fieldset> 
<h2 class="hdr-public-profile">Public Profilex</h2> 
.Public Profile 字 段 ... 


<div class= TOW > 
<fieldset class="radios"> 
<legend>Gender:</legend> 
<input type="radio" id="gender-male" name="gender" value="male" /> 
<label for="gender-male">Male</l1abel> 


<input type="radio" id="gender-female" name="gender" value="female" /> 
<label for="gender-female">Female</1label> 
</fieldset> 
</div> 
</fieldset> 


<fieldset> 
<h2 class="hdr-emails">Emails</h2> 
。Emails 字 段 ... 
</fieldset> 


<input type="submit" value="Create Account" class="btn" /> 
</form> 





16.4.1 我 对 四 个 表单 部 分 分 别 使 用 了 fieldset， 并 将 Public Profile (公开 资料 ) 部 分 的 Gender ( 性别 ) 
单 选 按钮 使 用 一 个 fieldset 包围 起 来 。 注 意 ， 我 为 被 股 僚 的 fieldset 添加 了 radios 类 ， 方 便 为 其 添加 特 
定 的 样式 ， 同 时 ， 还 在 其 中 添加 了 一 个 legend 元 素 ， 用 于 摘 述 单 选 按钮 〈 为 确保 尽量 简单 ， 这 段 代 码 中 移 
除了 一 些 div。 这 段 被 钥 套 的 fieldset 的 完整 代码 见 16.9 节 ) 





使 用 fieldset 元 素 对 表单 进行 组 织 CSS 对 legend 元素 的 样式 修改 能 
是 可 选 的 ， 使 用 legend 也 是 可 选 的 (使 用 有 限 , 尤其 是 关于 定位 的 样式 。 如 果 遇 到 麻烦 ， 
legend 则 必须 要 有 fieldset ) 。 不 过 我 强烈 可 以 上 网 搜索 相关 的 解决 办 法 。 

推荐 使 用 fieldset 和 legend 对 相关 的 单 选 按 

钮 进行 分 组 。 
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Creating a Form 全 ET { 
creatmoarom [El background-color: #f1f1f1; 
Re-enter Fassword: border: none; 
border-radius: 2px; 
margin-bottom: 12px; 
overflow: hidden; 
padding: 0 .625em; 


Address 


Street Address: 天 } 
City: 
State: Alabama _ 


， 
ZIP Code: .radios { /* nested fieldset */ 


background-color: transparent; 
position: relative; 


Public Profile margin-bottom: 0; 
} 


Picture: | Browse.,, | h2 { 


Maximum size of 700k. JPG, GIF or PNG. background-color: #dedede; 
border-bottom: 1px solid #d4d4d4; 

Screen Name: | | border-top: 1px solid #d4d4d4; 

Website URL: ntta wwwexamiale:-com border-radius: 5px; 

box-shadow: 3px 3px 3px #ccc; 

color: #fff; 

font-size: 1.1em; 

margin: 12px; 

padding: 0.3em 1em; 

text-shadow: #9FBEB9 1px 1px 1px; 

text-transform: uppercase; 


Have a homepage or a blog? Put the address here, 
beginning with http:// Or https://. 








.hdr-account { background-color: #0b5586; } 

.hdr-address { background-color: #4494c9; } 

.hdr-public-profile { background-color: 
#377d87; } 

.hdr-emails { background-color: #717f88; } 





16.4.2 没有 添加 任何 CSS 的 情况 下 ， 你 可 以 16.4.3 ”我 为 所 有 的 fieldset 元 素 添加 了 外 边 
看 到 ， 浏 览 需 默 认为 每 个 fieldset 添加 了 一 个 边 距 、 背 景 颜 色 和 内 边 距 ， 并 为 每 个 标题 添加 了 特殊 
框 ，Public Profile 里 面 舱 套 的 Gender 也 有 边框 的 背景 颜色 





legend 元 素 、 标 题 、 屏 幕 阅读 器 和 样式 
legend 元 素 可 以 提高 表单 的 可 访问 性 。 对 于 每 个 表单 字段 ， 屏 幕 阅读 器 都 会 将 与 之 关联 
的 legend 文本 念 出 来 ， 从 而 让 访问 者 了 解 字 段 的 上 下 文 。 这 种 行为 在 不 同 的 屏幕 阅读 器 和 浏 
览 器 上 并 不 完全 一 样 , 不同 的 模式 下 也 不 一 样 ( 屏幕 阅读 器 的 用 户 有 多 种 听 读 和 导航 的 模式 )。 
很 多 情况 下 ，]legend 文本 会 如 你 所 预期 的 那样 念 出 来 。 有 时 ， 文 本 不 会 念 出 来 ; 有 时 ， 
屏幕 阅读 器 又 会 走向 另 一 个 极端 ， 针 对 每 个 控件 都 将 legend 文本 念 一 遍 。 此 外 ， 有 的 浏览 器 
会 限制 可 以 对 legend 添加 的 样式 ， 或 者 让 添加 样式 变 得 更 难 。 
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考虑 到 以 上 这 些 问 题 ,， 使 用 hl ~ h6 标题 代替 legend 来 识别 一 些 (并非 所 有 ) fieldset， 
就 像 我 之 前 所 做 的 那样 ， 参 见 图 16.4.1， 就 是 一 个 明智 的 选择 。JAWS ( 用 户 数 量 最 多 的 屏幕 
阅读 器 ) 会 将 标题 与 相关 联 的 表单 字段 连 在 一 起 阅读 ， 因 此 可 访问 性 不 会 受到 影响 。 而且 ， 
屏幕 阅读 器 允许 用 户 通过 标题 在 页 面 内 切换 内 容 。 此 外 ， 还 可 以 很 轻松 地 对 标题 添加 样式 ， 


这 也 是 一 个 额外 的 好 处 。 


并 非 所 有 的 表单 都 是 相似 的 ， 因 此 你 所 使 用 的 方法 可 以 有 一 些 差异 。 无 论 如 何 ， 对 于 单 


选 按 钮 ， 最 好 总 是 使 用 fieldset 和 legend， 


Browse., 
Wamu ee of TOUR. PO GF or PWG 


Scroon Namo 


Website URL: | http/\www example com 


HBve 8 romepops Cr 3 Di0g ? PM Ihe SO Po 
SI wan henp// Dr hetpet// 


Bw 





图 16.4.4 ”新 添加 的 CSS 将 不 同 分 组 的 表单 字段 
清晰 地 隔 开 了 


16.5 创建 文本 框 


文本 框 可 以 包含 一 行 无 格式 的 文本 ， 它 
可 以 是 访问 者 想 输 入 的 任何 内 容 ， 通 常用 于 
姓名 、 地 址 等 信息 。 

每 个 文本 框 都 是 通过 带 有 type="text" 的 
input 标签 表现 出 来 的 。 除 了 type 之 外 ， 还 有 
一 些 其 他 可 用 的 属性 ， 其 中 最 重要 的 就 是 name 

(参见 图 16.5.1 ) 。 服 务 需 端的 脚本 使 用 你 指 
定 的 name 获取 访问 者 在 文本 框 中 输入 的 值 或 
预 设 的 值 ( 即 value 属性 值 ) 。 事 实 上 ，name 











和 value 对 其 他 的 表单 字段 类 型 来 说 ， 也 是 很 
重要 的 ， 你 将 在 本 章 余 下 的 部 分 看 到 这 一 点 。 


<form method= post” ”action= Show-data.php > 
<fieldset> 
<h2 class="account">Account</h2> 
<div class="fields"> 
<p class="row"> 
<label for="first-name">First Name: 
» </1abel> 
<input type="text" id="first- 
name”" name="first name" 
class="field-large”" required 
aria-required= "true” /> 
</p> 
<p class="row"> 
<label for= ]ast-name >Last Name: 
</1abel> 
<input type="text" id="last- 
; name" name="last name" 
class="field-large" /> 
</p> 
<p class="row"> 
<label for="email">Email:</1abel> 
<input type="email" id="email" 
; name="email" placeholder:= 
"yourname@example.com" 
class="field-large”" /> 
</p> 
更 多 字段 ov 


</div> 





图 16.5.1 ”必须 为 每 个 文本 框 设 置 name 属性 ， 只 
有 在 希望 为 文本 框 添 加 默认 值 的 情况 下 才 需 要 设 
置 value 属性 。 第 三 个 文本 框 使 用 了 placeholder 
属性 (参见 图 16.5.2 ) ， 第 一 个 则 使 用 了 required 
属性 (参见 图 16.5.3 ) 。 注 意 ， 我 还 设置 了 aria- 
required="true"” (参见 提示 ) 。 这 个 例子 还 演示 了 
name 可 以 与 for 和 id 不 一 样 ,也 可 以 与 它们 一 样 ( 参 
见 16.6 节 的 补充 材料 ) 
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创建 文本 框 的 步骤 

(1) 如 果 需 要 ， 输 入 用 于 让 访问 者 识别 文 
本 框 的 标签 , 例如 <label for="idlabel1">Last 
Name:</1label>， 其 中 id1abe] 匹配 第 (4) 步 中 
的 标签 , 关于 这 一 点 , 下 一 帮会 给 出 更 多 解释 。 

(2) 输 入 <input type="text"。 

(3) 输入 name="qdataname"， 这 里 的 dataname 
是 用 于 让 服务 器 ( 和 脚本 ) 识别 输入 数据 的 
Xs 

(4) 如 果 在 第 (1) 步 中 创建 了 1abel， 输入 
id="id1abe1"， 这 里 的 idlabel 跟 第 (1) 步 中 
for 属性 的 文本 一 样 。 这 跟 具 有 显 式 文本 框 的 
label 元 素 关 联 。 很 多 程序 员 将 id 和 name 设 
为 同一 个 值 ， 尽 管 这 并 不 是 必需 的 《图 16.5.1 
展示 了 这 两 种 方法 ) 。 

(5) 如 果 需 要 ， 输 入 value="defaul1t"， 这 
里 的 default 是 这 个 字段 中 最 初 显示 的 数据 ， 
如 采访 问 者 没有 输入 别 的 内 容 的 话 ， 这 一 数 
据 将 被 发 送 到 服务 天。 

(6) 如 果 需 要 ,输入 placeholder="hinttext"， 
这 里 的 hinttext 是 这 个 字段 中 最 初 显示 的 数 
据 ， 用 于 指导 用 户 的 输入 ， 如 图 16.5.2 所 示 。 
当 input 元 素 获 得 焦点 时 , 这 些 文本 将 会 消失 ， 
让 用 户 输入 内 容 。 

(7) 如 果 需 要 ， 输 入 required="required"， 
表示 仪 在 这 个 字段 有 值 的 情况 下 才能 提交 表 
单 ， 如 图 16.5.3 所 示 。 

(8) 如 果 需 要 , 输入 autofocus 或 autofocus= 
"autofocus"( 在 HTMLS5 中 这 两 种 方法 均 可 ) ， 
如 图 16.5.4 所 示 。 如 果 这 是 第 一 个 拥有 此 属 
性 的 表单 控件 ，input 元 素 在 页 面 加载 时 会 默 
认 获 得 焦点 。 

(9) 如 有 果 和 需要， 通过 输入 size="n" 定义 文 
本 框 的 大 小 ， 这 里 的 是 需要 设置 的 文本 框 
宽度 ， 以 字符 为 单位 。 也 可 以 使 用 CSS 设置 
输入 框 的 宽度 ， 参 见 图 16.5.5。 






































(10) 如 果 需 要 ， 输 入 maxlength="n"， 这 
里 的 n 是 该 文本 框 允许 输入 的 最 大 字符 数 。 

(11) 最 后 , 输入 > 或 />, 结束 文本 框 ( 参 
见 最 后 一 条 提示 ) 。 





而 民 得 Craatlns a Ferm 


Ereating @ Farm 二 


First Name: 


Last Name: 





Emadl; youmanma sam ea 





16.5.2 ” 占 位 符 是 为 用 户 填 写 表单 提供 提示 和 和 额 
外 指导 的 好 方法 。placeholder 属性 中 的 文本 会 以 
浅 灰 色 出 现在 文本 框 中 。 当 用 户 开始 在 字段 中 输入 
文本 时 , 浅 灰 色 文本 就 会 消失 。( 一 种 例外 情况 是 : 
当 字 有 段 获得 焦点 ， 而 非 用 户 开始 输入 的 时 候 ，IE10 
会 隐藏 占 位 符 文 本 。 ) 如 果 用 户 在 没有 输入 任何 信 
息 的 情况 下 将 焦点 移 开 , 浅 灰 色 文 本 又 会 再 次 出 现 。 
这 是 HIMLS 的 为 一 项 新 特性 ， 旧 浏览 妖 会 忽略 它 

















[= 时 主题 二 | Craatlns a Ferrm 


= 





Ereatdlng i Porm 


First Name: | | 
Last Narmm a 
na | caut bhis Heid: 
Ema lB ,GGT 
Passwend: 


Re=anter Passyweed: 








16.5.3 如 果 用 户 在 提交 表单 时 有 一 个 市 
required 属性 的 字段 没有 填写 ， 浏 览 硕 会 显示 一 个 
类 似 的 提示 。 这 个 消息 的 样式 在 不 同 的 训 览 硕 中 会 
有 差异 。 这 个 特性 是 HITMLS 专 有 的 ， 因 此 旧 的 浏 
览 锅 会 忽略 required ( 不 过 表单 仍 可 正常 工作 ) 。 
在 16.3 节 中 提 到 ， 针 对 旧 的 浏览 器 ， 可 以 使 用 
JavaScript 对 表单 进行 验证 ， 此 外 ， 无 论 用 户 使 用 
哪 种 浏览 磺 ， 都 应 该 在 服务 怖 端 验 证 表单 





<input type= text ”id= first-name- 


name="first name" class="field-large" 
required aria-required="true" autofocus /> 








16.5.4 ”页 面 加载 时 ,最 好 有 一 个 字段 自动 获取 
焦点 ， 这 样 用 户 就 可 以 立即 开始 输入 。 要 实现 这 一 
功能 ， 可 以 使 用 autofocus 属性 
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Create a New Account 


hCGCOUNT 


FirstName: | 
Last Name: 
Emalk vomamatexample car 
Passwerd: | 
Re-anter Passweord: | 





(I Tl 


16.5.5 ”针对 不 同 的 字段 类 型 ， 可 以 使 用 不 同 尺 
寸 的 文本 框 。 在 我 们 的 例子 中 ， 我 们 使 用 CSS 通 


过 类 设置 宽度 


City: |Mal | 


Manila 


State. | Maplewood 


ZIP Code: Samma cy 





16.5.6 输入 Ma 后 ，Firefox 根据 先前 的 表 
单 输入 给 出 了 一 些 包含 同样 字母 的 建议 文本 。 我 
可 以 从 提示 文本 列表 中 进行 选择 ， 也 可 以 继续 输 
入 。 如 果 整 个 表单 或 者 这 个 特定 的 input 设置 了 
autocomplete="off"， 就 不 会 显示 这 些 提示 ， 浏 览 
恬 也 不 会 保存 用 户 所 输入 的 内 容 


分 隔 表单 元 素 

对 各 个 表单 元 素 进行 分 隔 有 很 多 方法 。 
在 这 些 例子 中 ， 我 们 大 多 数 情况 下 使 用 p 元 
素 ， 还 有 一 些 情 况 下 使 用 div 元 素 ( 辟 如 骨 
套 p 的 情况 ) ， 参 见 图 16.5.1。 所 有 的 示例 中 
都 使 用 了 class="row" 作为 定义 样式 的 钩子 。 
此 外 , 有 的 人 使 用 ol 或 ul 来 组 织 表 单 的 元 素 。 
通常 , 列表 对 屏幕 阅读 器 用 户 来 说 很 有 帮助 。 
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不 过 有 的 屏幕 阅读 页 在 明 读 放 在 列表 中 的 表 
单元 素 时 会 有 一 些 问题 ,并 让 用 户 感 到 疑惑 。 
因此 ， 我 选择 p 和 div。 


尽管 label 是 可 选 的 ， 但 我 强烈 推荐 
使 用 它们 。 它 们 对 提升 表单 的 可 访问 性 和 可 
用 性 有 很 重要 的 作用 。 





二 网” 如 果 访 问 者 跳 过 了 一 个 字段 ， 而 且 你 
没有 为 该 字段 设置 默认 值 ， 那 么 当 用 户 提 交 
表单 时 ， 发 送 到 服务 器 的 name 属性 就 是 未 定 
义 的 空 值 。 


不 要 将 placeholder 属性 (图 16.5.1 
和 图 16.5.2 中 都 有 例子 ) 同 value 属性 再 混 。 
它们 都 会 让 文本 框 默认 出 现 一 些 文本 ， 但 
placeholder 文本 会 自动 消失 ， 且 不 会 被 发 送 
到 服务 器 ， 而 value 在 输入 框 获得 焦点 时 不 会 
消失 ， 且 这 些 内 容 会 被 发 送 到 服务 器 。 由 此 
看 来 ， 如 果 一 个 文本 框 同 时 具有 placeholder 
和 非 空 value， 后 者 会 显示 在 文本 框 中 。 


默认 情况 下 ， 大 多 数 浏 览 器 会 保 
存 用 户 输 入 的 文本 ,这样 就 可 以 在 日 后 节 
省 用 户 输入 的 时 间 (参见 图 16.5.6) 。 可 
以 通过 对 input 添 加 autocomplete="off" 
来 关闭 这 一 特性 。 这 对 于 要 求 输入 敏感 
信息 (如 信用 卡号 ) 的 字段 来 说 是 很 有 
用 的 。 如 果 将 它 用 于 form 元 素 ( 例 如 ， 
<form method= post” action="process.php" 
autocomplete= "off"> ) ， 那 么 其 中 的 每 个 字 
段 都 会 这 样 。 


6 我 们 所 说 的 “获取 焦点 ”或 “拥有 焦 
点 ”， 指 的 是 光标 位 于 文本 框 内 ， 访 问 者 可 
以 随时 输入 值 的 状态 。 
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文本 框 大 小 的 默认 值 为 20。 不 过 ， 
访问 者 可 以 输入 更 多 的 字符 ， 直 到 达到 
maxlength 属性 规定 的 限制 。 如 果 需 要 更 大 
的 可 以 容纳 好 几 行 文本 的 字段 ， 最 好 使 用 
textarea 元 素 ( 参 见 16.11 节 )。 


就 像 其 他 自 关闭 的 元 素 ( 如 img ) 一 
样 ,使 用 > 或 /> 结尾 在 HIMLS 中 都 是 有 效 的 。 


无 论 你 选择 哪 种 方式 ， 一 定 要 保 桂 一 致 。 


16.6 为 表单 组 件 添加 说 明 标 俭 


标签 (label ) 是 描述 表单 字段 用 途 的 文本 。 
例如 ， 在 访问 者 应 该 输入 其 姓名 中 名 的 文本 
字段 之 前 ， 可 能 有 “First Name:” 的 字样 。 可 
以 使 用 label 元 素 〈 有 点 小 意外 吧 ) 标记 这 些 
文字 说 明 标 签 。 你 或 许 已 经 注意 到 前 面 的 示 
例 中 已 经 使 用 过 label 元 素 了。 

label 元 素 有 一 个 特殊 的 属性 : for。 如 
采 for 的 值 与 一 个 表单 字段 的 id 的 值 相同 ， 
该 label 就 与 该 字段 显 式 地 关联 起 来 了 (如 
图 16.6.1 所 示 ) 。 这 对 提升 表单 的 可 用 性 和 
可 访问 性 都 有 帮助 。 例 如 ， 如 果 访 问 者 与 标 
签 有 交互 ( 如 使 用 鼠标 点 击 了 标签 ) ， 与 之 
对 应 的 表单 字段 就 会 获得 焦点 ( 如 图 16.6.2 
所 示 ) 。 这 种 关联 还 可 以 让 屏幕 阅读 需 将 文 
本 标签 与 相应 的 字段 一 起 念 出 来 。 设 想 ， 这 
对 不 了 解 表单 字段 含义 的 视 障 用 户 来 说 是 多 
么 重要 。 出 于 这 些 原因 ， 我 强烈 建议 你 在 
label 元 素 中 包含 for 属性 。 





























<fieldset> 
<h2 class="account">Account</h2> 
<«div class="fields"> 
<p class="row"> 
<label for="first-name"> 
First Name:</label> 
<input type="text" 
: id="first-name" 


name="first name" 
class="field-large” /> 
</p> 


<p class="row"> 
<label for="last-name"> 
Last Name:</label> 
<input type="text" 
‘id="last-name" 
name= ]ast_name 
个 Class= field-]arge” /> 
</p> 
</div> 
</fieldset> 





16.6.1 每 个 label 的 for 属性 与 该 标签 对 应 的 
表单 字段 的 id 是 匹配 的 ， 这 样 可 以 将 该 标签 与 该 
字段 显 式 关联 起 来 


Craating a Form 





Creating a Form 


Firshi}ame: | | 


Last Name: 





.ltis Okawip email me with messages from other Users. 


Kis okay to emall me with occasional promotions about our other 
products, 





16.6.2 ”如 果 访 问 者 与 文本 框 的 标签 有 交互 ， 光 
标 就 会 位 于 该 文本 框 内 ,方便 用 户 输入 。 同 时 ， 复 
选 框 和 单 选 按钮 的 标签 则 让 用 户 可 以 通过 点 击 标签 
来 修改 状态 〈 就 像 点 击 表单 控件 一 样 ) 。 这 里 ， 选 
择 了 一 个 复 选 杠 
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为 表单 组 件 添 加 正式 标签 

(1) 输 入 <label。 

(2) 如 果 需 要 ， 输 入 for="id1abe1">， 这 
里 的 id1abel 是 对 应 表单 元 系 的 id 属 隆 值 。 

(3) 输入 标签 的 内 容 。 

(4) 输 入 </label>。 

(5) 如 采 创 建 的 是 表单 元 素 ， 确 保 包 括 id 
属性 ， 对 应 于 第 (2) 步 中 指定 的 for 属性 。 


可 以 使 用 CSS 对 标签 添加 样式 。 
站 16.6.3 的 示 合 让 每 个 标签 都 与 它 旁 边 的 字 
段 对 齐 ( 参见 图 16.6.2 ) 。 











for、id 和 name 属性 都 可 以 拥有 任意 
值 ， 0 。 相 关 信 息 参见 本 页 补充 


材料 中 的 介绍 。 


曲阳 还 可 以 将 一 个 表单 字段 放 在 一 个 包 
含 标签 文本 的 label 内 ,例如 ，<label>First 
<input type= text- 
name” /></1abel>。 (注意 在 这 种 情况 下 ， 就 
不 需要 使 用 for 和 id 了。) 不 过 ， 将 标签 与 
字段 分 开 是 更 常见 的 做 法 (参见 图 16.6.1 ) ， 
原因 之 一 是 这 样 更 容易 添加 样式 。 


Name : 


id、for 和 name 属性 的 命名 习惯 
正如 先前 提 到 的 ， 让 for、 


( 单 选 按钮 和 复 选 框 是 例外 ， 因 为 对 它们 来 说 ， 有 一 组 input 会 使 用 同一 个 name， 
) 本 章 的 例子 中 使 用 的 值 都 是 一 个 单词 ， 例 如 for="email"、 


对 每 个 input 来 说 都 是 唯一 的 。 
id="email" name="email", 

对 于 包 
name ne 机 2 


name=" first 


多 个 单词 的 值 ， 我 们 在 for 和 id 中 使 用 连 字 符 


参见 图 16.6.1。 例 如 ，for="first-name"、 
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有 时 ，placeholder 会 被 误 作 label 
的 替代 属性 。 一 定 要 确保 placeholder 只 能 用 
作 一 种 提示 。 


/* 表单 字段 前 面 的 标签 */ 
label { 
cursor: pointer; 
display: inline-block; 
padding: 3px 6px; 
text-align: right; 
width: 150px; 


vertical-align: 


top; 


/* 复 选 框 后 面 的 标签 */ 

.Checkboxes label { 
text-align: left; 
width: 475px; 





图 16.6.3 ”对 标签 设置 样式 ， 是 让 表单 变 得 更 方 
便 使 用 和 更 好 看 的 重要 方面 。 如 果 为 ee 定 了 
cursor: pointer;， 当 访问 者 指向 标签 时 ， 就 会 显 
示 为 手 形 ， 而 不 是 默认 的 箭头 。 显 示 为 手 形 就 能 提 
示 用 户 这 是 一 个 可 以 操作 的 元 素 。 使 用 vertical- 
align: top; 则 会 让 标签 与 相关 的 表单 字段 对 齐 














id 和 name 属性 值 都 一 样 是 一 种 并 非 必 需 但 很 常见 的 做 法 。 


而 id 要 求 


C3 
id="first-name” 和 和 


name="first name"。 对 name 使 用 不 同 的 形式 ， 表 现 出 该 属性 的 值 可 以 与 另外 两 个 不 同 ， 实 际 
上 对 需要 传 入 服务 器 端 脚 本 的 name 值 使 用 下 划 线 分 隔 多 个 单词 也 是 一 种 常见 的 做 法 。 


无 论 使 用 哪 种 方法 ， 
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一 定 要 保证 for 和 id 的 值 是 一 样 的 。 
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16.7 创建 密码 框 


密码 框 与 文本 框 的 唯一 区 别 是 ， 密 人 码 框 
中 输入 的 文本 会 使 用 圆 点 或 星 号 进行 隐藏 ， 





如 图 16.7.1 和 图 16.7.2 所 示 。 


<p Cl1ass= TOW > 
<label for="password">Password:</1abel> 
<input type= password” id="password" 
name="password” /> 


</p> 
<p class="row"> 
<label for="password2">Re-enter 
Password:</1abel> 
<input type="password" id="password2" 
name="password2" /> 
</p> 





16.7.1 使 用 type="password" 创建 密码 杠 ， 而 
不 要 用 type="text" 

















First Name: Reose 


Last Name: Wioad 


Emall rose wondgtestemall.comi 


图 16.7.2” 当 访问 者 在 表单 中 输入 密码 时 ， 密 码 用 
圆 点 或 星 号 隐藏 起 来 了 。 但 提交 表单 后 访问 者 输入 
的 真实 值 会 被 发 送 到 服务 句 。 信 息 在 发 送 过 程 中 没 
有 加 密 








创建 客 码 框 的 步骤 

(1) 输入 用 于 让 访问 者 识别 密码 框 的 标 
签 ， 跟 16.6 节 中 的 一 样 。 

(2) 输入 <input type="password"。 

(3) 输入 id="id1abe1"， 这 里 的 id1abel 
跟 第 (1) 步 中 label 的 for 属性 值 一 样 。 








(4) 输入 name="qdataname" ， 这 里 的 dataname 
是 用 于 让 服务 亏 识 别 输入 数据 的 文本 。 

(5) 通过 输入 size="n" 定义 密码 框 的 大 
小 ， 这 里 的 n 是 需要 设置 的 密码 框 宽 度 ， 以 
字符 为 单位 。 

(6) 如 果 需 要 ， 输 入 maxlength="n"， 这 里 
的 n 是 该 密码 框 允许 输入 的 最 大 学 符 数 。 

(7) 如 果 需 要 ， 输 入 required 或 者 required= 
"required" (参见 16.5 市 )。 

(8) 如 果 需 要 ， 输 入 autofocus 或 者 autofocus= 
"autofocus" (参见 16.5 节 ) 。 

(9) 输入 > 或 />， 结 束 密码 框 。 


即便 密码 框 中 没有 输入 任何 内 容 ， 
name 属性 仍 将 被 发 送 到 服务 器 (使 用 未 定义 
的 Valye ) 。 





密码 框 提供 的 唯一 保护 措施 就 是 防止 
其 他 人 看 到 用 户 输 入 的 密码 。 如 果 要 真正 地 
保护 密码 ， 可 以 使 用 安全 服务 器 ( https:// ) 。 


16.8 创建 电子 邮件 框 、 搜索 杠 、 
电话 杠 和 URL 框 


电子 邮件 、 电 话 和 URL 这 几 种 输入 类 型 
是 HTMLS5 中 新 增 的 ， 如 图 16.8.1 所 示 。 它 
们 看 起 来 同文 本 框 很 相似 ， 但 却 有 一 些小 而 
有 用 的 特性 ， 用 于 帮助 验证 和 输入 内 容 ， 如 
图 16.8.2 ~ 图 16.8.4 所 示 。 过 去 ， 我 们 必须 
依赖 J avaScript 在 浏 览 禹 中 创建 这 些 功 能 。 

搜索 框 也 是 HTMLS5 中 新 增 的 输入 类 型 
( 如 图 16.8.5 所 示 ) 。 搜 索 框 跟 文 本 框 很 像 ， 
只 是 很 多 浏览 硕 将 搜索 框 显 示 得 像 操 作 系 统 
中 默认 的 搜索 框 ， 参 见 图 16.8.6。 
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<p class="row"> 
<label for="email">Email:</1abel> 
<input type="email" id="email" name="email" class="field-large” /> 
</p> 
<div class= TOW > 
<label for="website">Website URL:</1abel> 
<input type="url" id="website" name="website" class="field-large" 
> placeholder="http://www.example.com" /> 
<p class="instructions">Have a site or a blog? Put the address here, beginning with 
> <kbd>http://</kbd> or <kbd>https://</kbd>.</p> 
</div> 
<p class="row"> 
<label for="phone">Phone:</1abel> 
<input type="tel" id="phone”" name="phone" class="field-large”" placeholder="xxx-XXXx-XxXXxx" 
pattern="\d{3}-\d{3}-\d{4}” /> 
</p> 








16.8.1 合适 的 type 属性 值 分 别 指定 电子 邮件 框 、UREL 框 和 电话 框 。pattern 属性 用 于 定制 的 验证 规则 。 
它 使 用 正则 表达 式 对 用 户 在 框 中 输入 的 内 容 进行 限制 .对 于 这 个 例子 中 的 电话 输入 框 ,pattern 属性 要 求 “ 只 
接受 以 下 格式 的 输入 : xxx-xxx-xxxx， 其 中 x 均 为 数字 “(许多 电话 号 码 都 是 这 样 的 ) 。 不 必 对 那些 不 同 寻 
常 的 正则 表达 式 语法 感到 担心 ， 可 以 在 http://html5pattern.com 找到 一 些 常 用 的 正则 表达 式 ， 并 将 它们 复制 
粘贴 到 自己 的 pattern 属性 中 














Craagne a Form 








Crewting a Bera 





ACCOUNT 


First Name: 


Last Name: 


Emaik Drext that |s not in email formad 


WebsiteUR Kom 
| Please enter an ernaill addiess ee 


一 一 一 一 一 一 


16.8.2” 当 访问 者 在 现代 浏览 需 中 提交 表单 时 ， 
浏览 需 会 对 Email 字段 的 输入 文本 进行 检查 ， 确 保 
其 符合 电子 邮件 地 址 的 格式 。 如 果 格 式 不 合法 ， 会 
显示 如 图 所 示 的 错误 信息 ， 且 鼠标 重 置 到 该 字段 ， 
以 方便 访问 者 修改 文本 














ACCOUNT 


First Name: 
Last Name: 


Email: 


Hava a cha mr wm ? Put te aevess nere. 
FA OV hitpse//, 
| Mease énmr a (mL 


PR 、 


Create Account 


16.8.3” 当 访问 者 在 现代 浏览 带 中 提交 表单 时 ， 
浏览 姨 会 对 Website URL 字段 的 输入 文本 进行 检查 ， 
确保 其 符合 URL 格式 。 注 意 ，www.wikipedia.org 
并 不 是 有 效 的 URL， 因 为 URL 必须 以 http:/ 或 
https:// 开头 。 这 里 最 好 使 用 占 位 和 从 提示 访问 者 。 为 
外 ， 我 还 在 该 字段 下 面 的 解释 文本 中 指出 了 合法 的 
格式 。 从 图 16.8.4 可 以 看 得 很 清楚 
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ACCOUNT 


First Name: 


Last Name: 
Email: 
Website URL: http' / /vww,exampile,com 


Have a she ww a blog? Put he aocvess Nere. 
De We httpr// OV hrtpss// 


Phone: (123-555-55 
Wease mealdl ihe reoursted Borrmat | 


16.8.4 当 访 问 者 在 现代 浏览 融 中 提交 表单 时 ， 
浏览 絮 会 对 Phone 字段 的 输入 文本 进行 检查 ， 确 
保 其 符合 pattern 属性 中 指定 的 电话 号 码 格式 。 同 
时 ， 这 种 字段 对 于 使 用 iOS (iPhone 和 iPad ) 上 的 
Safari 的 用 户 来 说 也 很 方便 ， 因 为 它 会 启动 数字 键 
盘 而 非常 见 的 标准 键盘 

















<form method= get” action="search-results.php" 
IT0]e= Search > 
<label for="search">Search:</1abel> 
<input type= search” id="search" 
name="search”" size="30" 
placeholder="e.g., a book or 
magazine” /> 
<input type= Submit ”Value= Find It!” /> 
</form> 





16.8.5 ”搜索 框 是 应 用 placeholder 的 天 然 场 
合 。 同 时 ,注意 这 里 的 form 用 的 是 method="get" 
而 不 是 method="post"。 这 是 搜索 字段 的 常规 做 法 

( 无 论 是 type="search" 还 是 type="text")。 
关于 I0le="search"， 参见 提 示 


| Find It! | 





3 | Find ltl | 


The Lorax| 





Search: | e.g., a book or magazine 








16.8.6 0OSX 上 的 Chrome (如 上 面 的 两 幅 图 ) 、 
Safari 以 及 iOS 上 的 Mobile Safari 会 让 搜索 框 显 示 
为 贺 角 边框 。 当 用 户 开始 输入 ， 字 上段 右 侧 会 出 现 一 
个 x 按钮 , 用 于 清除 输入 的 内 容 。 在 其 他 浏览 锅 中 ， 
它 显 示 为 常规 文本 框 的 样子 ， 如 最 下 面 一 张 图 (更 
多 关于 样式 的 讨论 ， 参 见 提 示 ) 








创建 电子 邮件 框 、 搜 索 框 、 电 话 框 和 URL 
框 的 步骤 

(1) 输入 用 于 让 访问 者 识别 输入 框 的 标 
签 ， 参 见 16.6 节 。 

(2) 对 于 电子 邮件 框 ， 输 入 <input type= 
"email"; 对 于 搜索 框 ， 输 入 《<input type= 
"search"; 对 于 电话 框 ， 输入 <input type="tel ; 
对 于 URL 框 ,输入 <input type="url"。 

(3) 输入 id="idlabe1"， 这 里 的 id1abel 
跟 第 (1) 步 中 label 的 for 属性 相同 。 

(4) 输入 name="qdataname" ， 这 里 的 dataname 
是 用 于 让 服务 亏 识 别 输 入 数据 的 文本 。 

(5) 如 果 需 要 ， 输 入 value="default"， 这 
里 的 default 是 最 初 显示 在 字段 里 的 数据 ， 也 
是 访问 者 什么 都 不 输入 时 将 要 发 送 给 服务 需 
的 数据 。 

(6) 如 果 需 要 ,输入 placeholder="hinttext"， 
这 里 的 hinttext 是 最 初 显 示 在 字段 里 作为 对 
用 户 输 入 内 容 的 提示 的 数据 (参见 16.5 广 ) 。 

(7) 如 果 需 要 , 输入 required 或 者 required= 
"required" (参见 16.5 市 )。 

(8) 如 果 需 要 , 输入 autofocus 或 者 autofocus= 
"autofocus" (参见 16.5 节 ) 。 

(9) 如 采 需 要 ， 通 过 输入 size="n" 定义 框 
的 大 小 ， 这 里 的 是 需要 设置 的 框 的 宽度 ， 
以 字符 为 单位 。 也 可 以 使 用 CSS 设置 输入 框 
的 宽度 (参见 16.5 节 ) 。 

(10) 如 条 需要 ， 输 入 maxlength="n"， 这 
里 的 n 是 该 框 允 许 输 入 的 最 大 字符 数 。 

(11) 最 后 , 输入 > 或 者 />, 结束 输入 框 ( 两 
种 方法 在 HTMLS5 中 均 可 ) 。 
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截至 本 书写 作 之 际 ，Chrome、Firefox、 
IE10 和 Opera 10+ 部 提供 对 电子 邮件 框 和 
URL 框 的 验证 功能 。 注 意 这 些 功能 只 是 为 网 
站 创立 者 和 访问 者 提供 了 一 些 便利 ， 但 服务 
器 端的 验证 还 是 很 有 必要 的 (参见 16.3 节 ) 。 

关 便 你 使 用 像 之 前 提 到 过 的 H5F (https:// 
github.com/ryanseddon/H5F ) 这 样 的 JavaScript 


a 
服务 器 端 验 i 


空 的 电子 邮件 框 、 电 话 框 或 URL 框 
也 会 通过 验证 ， 除 非 有 iequired 属性 。 不 
过 ， 如 果 对 电话 框 添加 了 required， 但 没有 
为 pattern 属性 提供 内 容 ， 浏 览 器 仍 会 要 求 用 
户 填写 内 容 ， 但 任何 文本 ( 包括 数字 、 字 母 、 

字符 等 ) 都 会 通过 验证 。 


电子 邮件 框 也 可 以 使 用 multiple 属 
性 ， 这 样 就 可 以 输入 多 个 电子 邮件 地 址 (以 
各 号 分 隔 不 同 的 地 址 ) 。 


二 浏览 器 不 会 检查 输入 的 电子 邮件 地 址 
URL 是否 真实 存在 , 它 只 检查 格式 是 否 正确 。 


这 些 输入 类 型 也 支持 autocomplete 属 
性 ， 更 多 信息 参见 16.5 节 的 提示 。 


默认 情况 下 ， 为 Chrome、Safari 和 
Mobile Safari 等 浏览 器 中 的 搜索 框 设置 样 
式 是 受到 限制 的 (参见 图 16.8.6) 。 如 果 
要 消除 这 一 约束 ， 重 新 获得 CSS 的 控制 
权 ， 可 以 使 用 专 有 的 -webkit-appearance: 
none; 声明 ， 例 如 input[type="search"] { 
-webkitappearance: none; }。 更 多 信息 ( 包 
括 对 Firefox 的 支持 ) 参见 http://css-tricks. 
不 过 要 
注意 ，appearance 属性 并 不 是 官方 的 CSS， 
因此 不 同 浏览 器 的 行为 有 可 能 不 一 样 。 


com/almanac/properties/a/appearance/。 


如 果 仔 细 查 看 图 16.8.5 中 的 代码 ， 
你 会 发 现 我 为 form 添 加 了 ARIA 地 标 角 色 ， 
role="search"。 这 会 让 屏幕 阅读 器 指出 网 页 
上 有 搜索 区 域 ， 从 而 提高 页 面 的 可 访问 性 

如 果 你 的 表单 有 多 个 控件 而 非 只 有 搜索 ， 
将 与 搜索 相关 的 控件 放 在 一 个 fieldset 或 
div 中 并 为 其 添加 role="search"， 而 不 是 将 
role="search" 添加 到 form 元 素 本 身 。 


(WebKit 浏览 器 支持 两 个 非 官 方 
HTMLS 属性: autosave 和 results， 它们 


为 搜索 框 提 供 了 额外 的 行为 和 视觉 效果 。 更 
多 信息 参见 www.wufoo.com/html5/types/5- 


search.html 。 


如 果 和 包含 了 pattern 属性 ， 一 定 要 明 
确 告诉 访问 者 需要 遵循 的 模式 。 稍 不 留意 ， 
访问 者 就 有 可 能 放弃 提交 表单 。 


正则 表达 式 超出 了 本 书 的 范围 , 不 过 ， 
网 上 有 很 多 在 线 资源 (搜索 regex tutorial ) 。 
http:WhtmlSpattern.com 上 有 很 多 有 用 的 模式 +。 


(D 模式 指 的 是 用 于 描述 一 系列 用 来 匹配 规则 的 字符 串 〈 表 达 式 )。 一 一 译 者 注 
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16.9 创建 单 选 按钮 


还 记得 老式 汽车 收音 机 上 那些 大 大 的 
黑色 塑料 按钮 吗 ? 按 下 其 中 的 一 个 可 以 收听 
WFCR; 按 下 男 一 个 可 以 收听 WRNX。 不 过 ， 
不 可 以 同时 按 下 两 个 按钮 。 单 选 按钮 也 遵循 同 
样 的 工作 方式 。 对 input 元 素 设 置 type="radio" 
即 可 创建 单 选 按钮 ， 参 见 图 16.9.1 和 图 16.9.2。 











<fieldset class="radios"> 
<legend>Gender:</legend> 


<p class="row"> 
<input type="radio" 
id="gender-male" name="gender" 
value= male” /> 
<label for="gender-male">Male</1abel> 


</p> 
<p class="row"> 
<input type="radio" 
id="gender-female”" name="gender' 
value= female” /> 
<label for="gender-female">Female 
</l1abel> 
</p> 
</fieldset> 





16.9.1 同一 组 单 选 按钮 的 name 属性 值 必 须 
相同 ， 这 样 在 同一 时 间 只 有 其 中 一 个 能 被 选中 。 
value 属性 也 很 重要 ， 因 为 对 于 单 选 按 钮 访问 者 无 
法 输入 值 











创建 单 选 按钮 的 步骤 

(1) 如 果 需 要 ,输入 单 选 按钮 的 介绍 文本 。 
例如 ， 可 以 使 用 “选择 下 列 选 项 中 的 一 个 ”。 

(2) 输入 <input type="radio"。 

(3) 输入 name="radioset"， 这 里 的 radioset 
用 于 识别 发 送 至 服务 硕 的 数据 ， 同 时 用 于 将 
多 个 单 选 按钮 联系 在 一 起 ， 确 保 同 一 组 中 最 
多 只 有 一 个 被 选中 。 





.Tadios { 
background-color: transparent; 
position: relative; 
margin-bottom: 0; 


} 


.radios .row { 
margin: 0 0 0 150pX; 


} 


.radios legend { 
left: 0; 
padding: 0 6px; 
position: absolute; 
text-align: right; 
top; ‘20X; 
width: 148px; 

} 


.radios label { 
padding-left: 2px; 
margin-right: 5pX; 
vertical-align: middle; 
width: auto; 





16.9.2 ”这 里 让 legend 在 .radios div 中 绝对 定 
位 ，.radios div 已 设 为 position: Telative ( 对 
legend 来 说 ，position 比 margin 更 有 效 ) 。 为 
.row 类 添加 一 个 大 的 margin-left 值 ， 让 它们 位 
于 Gender 的 legend 的 右 侧 。 对 label 元 素 设 置 的 
vertical-align: middle; 则 让 标签 文本 与 单 选 按 
钮 在 竖 直 方 同 上 对 齐 





Crealing a Form 


Gender Male 
3 Famale 





16.9.3 由 于 标签 (Male 和 Female ) 是 label 
元 又 ， 与 标签 交互 则 会 选中 它们 对 应 的 单 选 按 锂 
(4) 输入 id="idlabe1"， 这 里 的 id1abel 
对 应 你 在 第 (8) 步 中 创建 的 for 属性 值 。 跟 
name 值 不 同 ( 同一 组 单 选 按钮 的 name 值 都 是 
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相同 的 ) ， 同 一 页 面 中 每 个 元 素 的 id 必须 是 
唯一 的 。 

(5) 输入 value="data"， 这 里 的 date 是 该 
单 选 按钮 被 选中 〈 无论 是 被 默认 选中 还 是 被 
访问 者 选中 ) 时 要 发 送 给 服务 硕 的 文本 〈 如 
图 16.9.3 所 示 ) 。 

(6) 如 果 需 要 ， 输 入 checked 或 者 checked= 
"checked" 证 该 单 选 按钮 在 页 面 打 开 时 默认 处 
于 激活 状态 ( 两 种 方法 在 HIMLS 中 均 可 ) 。 
在 一 组 单 选 按钮 中 ， 只 能 对 一 个 按钮 添加 这 
一 属性 。 

(7) 输入 > 或 者 />。 

(8) 输入 <label for="id1abel">radio 1abel 
</1label>， 其 中 ,id1abel 与 第 (4) 步 中 单 选 
按钮 的 id 值 相同 ,radio 1abel 则 用 于 让 访 


<«div class="fields checkboxes"> 
<p class="row"> 
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问 者 识别 该 单 选 按钮 。radio 1abel 的 值 通常 
与 value 的 值 相 同 ， 但 这 并 不 是 必需 的 。 

(9) 对 同一 组 内 的 所 有 单 选 按钮 ， 重 复 第 
(2) 步 至 第 (8) 步 。 





于 我 推荐 使 用 fieldset 谋 套 每 组 单 选 
按钮 ， 并 用 legend 进行 描述 ( 如 图 16.9.1 所 
示 ) 0 更 多 细节 参见 16.4 3 


16.10 创建 复 选 框 


在 一 组 单 选 按钮 中 ， 只 人 允许 选择 一 个 答 
案 ; 但 在 一 组 复 选 按钮 中 ， 访 问 者 可 以 选择 任 
意 数 量 的 答案 。 同 单 选 按钮 一 样 ， 复 选 框 也 与 
name 属性 的 值 联系 在 一 起 ， 人 参见 图 16.10.1。 





<input type="checkbox”id="email-ok-msg-from-users”name="email signup[]" 


Value="user-emails"” /> 


<label for="email-ok-msg-from-users'">It is okay to email me with messages from other users. 


; </1abel> 


</p> 


<p class="row"> 


<input type="checkbox” id="email-ok-occasional-updates" name="email signup[]" 


Value="occasional-updates” /> 


<label for="email-ok-occasional-updates">It is okay to email me with occasional promotions 


about our other products.</label> 
</p> 
</div> 








图 16.10.1 








注意 ， 标 签 文本 (未 突出 显示 ) 不 需要 与 value 属性 一 致 。 这 是 因为 标签 文本 用 于 在 浏览 器 中 


问 访 问 者 标识 复 选 框 ， 而 value 则 是 发 送 到 服务 硕 端 脚本 的 数据 的 一 部 分 。 空 的 方 括号 是 为 PHP 脚本 的 name 
准备 的 (参见 提示 ) 。 我 创建 了 一 个 .checkboxes 类 ， 以 限制 为 复 选 框 添加 样式 的 label， 人 参见 图 16.10.2 


.Checkboxes label { 
text-align: left; 
width: 475px; 


Ereating a Perrm 
ks 

















加 此 证 Dkay Ww emall me With messages rom Omer Uaare. 


国 ltis Gheay themail me with occasional promolions gbout cur wther 
Products. 











图 16.10.2 对 于 复 选 框 ， 通 常 需要 为 标签 设置 不 
同 的 样式 ， 因 为 这 些 标签 位 于 输入 元 素 之 后 ， 参 见 
图 16.10.3 








16.10.3 访问 者 可 以 根据 需要 选择 任意 数量 的 
框 ， 每 个 框 对 应 的 值 及 复 选 框 组 的 名 称 都 会 被 发 送 
到 脚本 
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创建 复 选 框 的 步骤 

(1) 如 有 果 需 要 ， 输 入 复 选 框 的 介绍 文本 。 
例如 ， 可 以 使 用 “选择 下 列 选 项 中 的 一 个 或 
2 

(2) 输入 <input type="checkbox"。 

(3) 输入 name="boxset"， 这 里 的 boxset 
用 于 识别 发 送 至 服务 硕 的 数据 ， 同 时 用 于 将 
多 个 复 选 框 联系 在 一 起 ( 对 于 所 有 复 选 框 使 
用 同一 个 name 值 ) 。 

(4) 输入 id="idlabe1"， 这 里 的 idlabel 
对 应 于 第 (8) 步 中 1abel 的 for 属性 值 。 

(5) 输入 value="data"， 这 里 的 data 是 该 
复 选 框 被 选中 ( 无论 是 被 访问 者 选中 还 是 被 
建站 者 选中 ， 如 图 16.10.1 所 示 ) 时 要 发 送 给 
服务 大 的 文本 。 

(6) 输入 checked 或 checked="checked" 让 
该 复 选 框 在 页 面 打开 时 默认 处 于 选中 状态 (在 
HTML5 中 两 种 写法 均 可 ) ， 建 站 者 或 访问 者 
可 能 会 义 选 默认 的 选项 。 

(7) 输入 > 或 者 /> 以 结束 复 选 框 。 

(8) 输入 《label for="7d71abe7"> checkbox 
1abel1</1label>， 其 中 ，id1abel 与 第 (4) 步 复 
选 框 元 取 中 的 iq 值 相同 ，checkbox 7abe7 则 
用 于 让 访问 者 识别 该 复 选 框 。 

(9) 对 同一 组 内 的 所 有 复 选 框 ， 重复 第 (2) 
步 至 第 (8) 步 。 








FE 如果 使 用 PHP 处 理 表单 ， 在 图 16.10.1 
中 使 用 name="boxset[]"( 这 里 的 boxset 用 
于 标识 发 送 给 脚本 的 数据 ) 就 会 自动 地 创 
建 一 个 包含 复 选 框 值 的 数组 (名 为 $ POST 
['boxset'] ) 。 


16.11 创建 文本 区 域 


如 果 希 望 给 访问 者 填写 问题 或 评论 的 空 


间 ， 可 以 使 用 文本 区 域 。 参 见 图 16.11.1。 


«label for="bio">Bio:</label> 
<textarea id="bio" name="bio" cols="40" 


rows="5" class="field-large"></ 
textarea> 





16.11.1 rows 和 cols 属性 分 别 控制 文本 区 域 的 
高 度 和 宽度 ， 除 非 使 用 CSS 履 盖 其 中 之 一 (人 参见 
图 16.11.2 ) 或 者 全 部 。 即 便 在 CSS 中 设置 了 尺寸 ， 
rows 和 cols 还 是 有 用 的 ， 因 为 用 户 的 浏览 希 有 可 
能 会 关闭 CSS 





textarea { 
font: inherit; 
padding: 2px; 
} 


.field-large { 
width: 250px; 





} 


16.11.2 默认 情况 下 不 会 继承 textarea、font 
属性 ， 因 此 必须 显 式 地 设置 该 属性 。 如 果 需 要 ， 

可 以 为 与 其 他 文本 杠 、URL 框 等 输入 框 具 有 一 
个 类 ( 这 里 为 .field-large ) 的 文本 区 域 设 置 宽 
度 。 由 于 没有 设置 高 度 ， 因 此 文本 区 域 的 高 度 〈 如 
图 16.11.3 所 示 ) 由 HTML 中 的 rows 属性 决定 ( 参 
见 攻 16.11.1 ) 








Ereating a Forrm 














renting i - 
Scereen Name:; 
Webslts URL: |http:iirnr, example,.som 


Have a me Br B Beg? Pur 的 本 Beioress ara, 
bp vailh eet Ev hetpm Er, 


上 By name ls Roese. [rn from 
Kalamazcs, but | really 
blossomed when | studied gbraad 
for a ysar in Prague. 





16.11.3 ”如果 没有 使 用 maxlength 属性 限制 文 
本 区 域 的 最 大 字符 数量 ， 访 问 者 可 以 输入 多 达 32 
700 个 字符 。 必 要 时 ， 文 本 区 域内 会 显示 一 个 滚动 
条 (这 里 没有 显示 ) 。 访 问 者 可 以 通过 拖 蝶 文本 区 
域 右 下 角 的 斜 线 改变 文本 区 域 的 大 小 。 如 果 设 置 了 
textarea { resize: none; +， 那 么 访问 者 就 无 法 
这 样 操 作 了 
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创建 文本 区 域 的 步 又 

(1) 如 果 需 要 ， 输 入 用 于 标识 文本 区 域 的 
解释 性 文本 。 

(2) 输入 <textarea。 

(3) 输入 id="idlabe1"， 这 里 的 id1abel 
跟 第 (1) 步 中 1abel 的 for 属性 值 相 同 。 

(4) 输 入 name="dataname",， 这 里 的 
dataname 是 用 于 让 服务 器 ( 和 脚本 ) 识别 输 
人 数据 的 文本 。 

(5) 如 果 需 要 ， 输 入 maxlength="n"， 这 里 
的 n 是 可 以 输入 的 最 大 字符 数 。 

(6) 输入 cols="n"， 这 里 的 n 是 文本 区 域 
的 宽度 (以 字符 为 单位 ) 。 

(7) 输入 rows="n" 
的 高 度 〈 以 = 为 单位 ) 。 

(8) 输入 >。 

(9) 输入 文本 区 域 的 默认 文本 ( 如 果 有 的 
话 ) ， 这 些 文本 会 显示 在 文本 区 域 中 。 

(10) 输入 </textarea> 以 完成 文本 区 域 。 


要 为 文本 域 添加 预 设 值 ， 就 在 

textarea 开始 标签 和 结束 标签 之 间 添 加 文本 
( 访 Re ii we 通常 ， 可 以 包含 
placeholder 属性 定义 用 于 占 位 的 文本 。 














这 里 的 n 是 文本 区 域 














maxlength 是 HTMLS 中 为 文本 区 域 
er 因此 它 的 行为 在 不 同 浏 览 器 
可 能 不 一 样 ( 参见 www.wufoo.com/html5/ 
attributes/03-maxlength.html ) 。 
接 忽略 该 属性 。 


] 览 双全 
旧 济 见证 丘 评 A 


通过 CSS 可 以 更 好 地 控制 文本 区 域 的 
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16.12 创建 选择 框 


选择 框 非常 适合 向 访问 者 提供 一 组 选项 
从 而 允许 他 们 从 中 选取 ， 参 见 图 1612.1. 
它们 通常 呈现 为 下 拉 亲 单 的 样式 ， 参 见 
图 16.12.3。 如 果 人 允许 用 户 选 择 多 个 选项 ， 选 
择 框 就 会 呈现 为 一 个 带 滚动 条 的 项 目 框 。 





<label for="state">State:</label> 
<select id="state" name="state"> 


<option value="AL">Alabama</option> 


<option value="AK">Alaska</option> 


</select> 





16.12.1 选择 框 由 两 种 HTML 元素 构成 : 
select 和 option。 通 常 ， 在 select 元 素 里 设置 
name 属性 , 在 每 个 option 元 素 里 设置 value 属性 。 
我 们 可 以 为 select ( 如 图 16.12.2 所 示 ) 和 option 
元 系 添加 样式 ,但 有 一 定 的 限制 





select { 
font-size: inherit; 


} 


16.12.2 CSS 规则 要 求 菜 单 文 本 跟 其 父 元 素 字 
号 大 小 相同 ， 否 则 默认 情况 下 它 看 上 去 会 小 很 多 。 
可 以 使 用 CSS 对 width、color 和 其 他 的 属性 进行 
调整 ， 不 过 ， 不 同 的 浏览 器 呈现 下 拉 荣 单列 表 的 方 
式 略 有 差异 

















Street Address: 
City: | 





State: 


Alabama 
ZIP Code: [ Aghe 


California 





16.12.3 ”默认 的 选择 是 菜单 中 的 第 一 个 选项 ， 
或 者 是 在 HTML 中 指定 了 selected 的 选项 ( 需要 
注意 的 一 点 是 ， 除 非 设置 了 size 属性 ， 否 则 访问 
者 就 必须 选择 菜单 中 的 某 个 选项 ) 
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1. 创建 选择 框 的 步 又 

(1) 如 果 需 要 ， 输 入 描述 末 单 的 文本 ， 参 
见 16.6 节 。 

(2) 输入 <select。 

(3) 输入 id="idlabe1"， 这 里 的 id1abel 
跟 第 (1) 步 中 label 的 for 属性 值 一 样 。 

(4) 输入 name="qdataname" ， 这 里 的 dataname 
用 于 在 收集 的 数据 发 送 至 服务 器 时 对 数据 进 
行 识别 。 

(5) 如 末 需 要 ， 输 入 size="n"， 
代表 选择 框 的 高 度 〈 以 行为 单位 ) 。 

(6) 如 末 需 要 ， 输 入 multiple 或 者 
multiple="multiple"( 两 种 方法 在 HTIMLS5 
中 均 可 ) ， 从 而 允许 访问 者 选择 一 个 以 上 的 
末 单 选项 ( 选择 的 时 候 需 按 住 Control 键 或 
Command 刍 ) 。 

(7) 输入 >。 

(8) 输入 <option。 

(9) 输 入 value="optiondata"， 这 里 的 
optiondata 是 选项 选中 后 要 发 送 给 服务 天 的 
数据 〈 如 果 省 略 value， 你 在 第 (12) 步 中 输入 
的 文本 就 是 选项 的 值 ) 。 

(10) 如 果 需 要 ， 输 和 人 selected 或 者 
selected="selected" (在 HTMLS 中 两 种 方式 
均 可 ) ， 指 定 该 选项 被 默认 选中 。 

(11) 输入 >。 

(12) 输入 希望 出 现在 末 单 中 的 选项 名 称 。 

(13) 输入 </option>。 

(14) 对 每 个 选项 重复 第 (8) 步 至 第 (13) 步 。 

(15) 输入 </select>。 

如 有 果 有 一 个 选项 很 多 的 特别 大 的 菜单 ， 
可 能 需要 对 这 些 选项 进行 分 组 ， 分 别 放 入 不 
同 的 类 别 ， 参 见 图 16.12.4 和 图 16.12.5。 


这 里 的 7 








2. 对 选择 框 选项 进行 分 组 
(1) 根据 “创建 选择 框 的 步 又 ”， 创 建 所 
需 的 选择 杠 。 


(2) 在 硕 望 放 在 同一 子 沫 单 中 的 第 一 组 选 
项 中 的 第 一 个 option 元 系 ( 参见 前 面 的 第 (8) 
步 ) 之 前 ， 输 入 《optgroup 。 

(3) 输入 1abel="swbmenutitle">， 这 里 的 
submenutitle 是 子 荣 单 的 标题 。 

(4) 在 该 组 的 最 后 一 个 option 元 素 之 后 ， 
输入 </optgroup>。 

(5) 对 每 个 子 菜 单 重 复 第 (2) 步 至 第 (4) 步 。 

















<label for="referral">Where did you find out 
about us?/1abel> 
<select ld= TefeTTal ”name= TefeITal > 
<optgroup label="Online"> 
<option value="social network">Social 
Network</option> 
<option value="search engine">Search 
Engine</option> 
</optgroup> 
<optgroup label="O0ffline"> 
<option value="postcard">Postcard 
</option> 
<option value="word of mouth >Nord of 
Mouth</option> 
</optgroup> 
</select> 





16.12.4 每 个 子玉 单 部 有 一 个 标题 (在 
optgroup 开始 标签 的 label 属性 中 指定 ) 和 一 系列 
选项 (使 用 option 元 厅 和 常规 文本 定义 ) 





Where did you find | Social Network | 
out about us? Online 
Social Network 
Search Engine 
Offline 
Postcard ee 
Word of Mouth | 





16.12.5 浏览 硕 通 向 会 对 optgroup 中 的 option 
缩 进 ， 从 而 将 它们 和 optgroup label 属性 文本 区 别 开 


如 果 添 加 了 size 属性 ， 那 么 选择 框 看 
起 来 会 更 像 一 个 列表 , 且 没 有 自动 选中 的 选项 ， 
参见 图 16.12.6 ( 除非 设置 了 selected ) 。 
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如 果 size 大 于 选项 的 数量 , 访问 者 
就 可 以 通过 点 击 空 白 区 域 让 所 有 的 选项 处 于 
未 选中 状态 。 


可 以 对 option 元 素 添加 1abel 属性 ， 该 
属性 用 于 指定 需要 显示 在 菜单 中 的 文本 (替代 
了 option 标签 之 间 的 文本 ) ,参见 16.10 节 。 不过， 
Firefox 并 不 支持 这 一 属性 ,因此 最 好 不 要 用 它 。 


Creating a Form 





图 16.12.6 由 于 设置 了 size 属 性， 菜单 显示 
为 一 个 有 滚动 条 的 列表 ， 默 认 情 况 下 没有 选中 任 
何 选项 。 这 个 示例 的 代码 为 xselect id="state" 
name="state”size="3">， 这 让 菜单 的 高 度 为 三 行 


16.13 ”让 访问 者 上 传 文件 


有 时 需要 让 网 站 的 用 户 向 服务 器 上 传 文 
件 (如 照片 、 人 简历 等 ) ， 人 参见 图 16.13.1。 








<form method="post" action="show-data.php" 
enctype="multipart/form-data"> 


<label for="picture">Picture:</1abel> 

<input type= file” id="picture" 
name= "picture” /> 

<p class="instructions">Maximum size of 
700k. JPG, GIF or PNG.</p> 


</form> 


图 16.13.1 要 让 访问 者 能 够 上 传 文件 ， 必 须 正确 
地 设置 enctype 属 性 ,创建 input type="file" 元 素 。 
对 input 使 用 multiple 属性 可 以 允许 上 传 多 个 文 
件 (这 里 并 没有 包含 该 属性 ) 。 这 是 HTMLS 中 新 
增 的 内 容 ， 它 也 得 到 了 浏览 器 的 广泛 支持 ， 不 过 ， 
移动 问 浏 览 器 和 IE 会 直接 忽略 它 ( 仪 正 10 文 持 ) 
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处 理 文 件 上 传 

处 理 文件 上 传 需 要 一 些 特殊 的 代码 。 可 
以 在 网 上 搜索 “file upload Script” (文件 上 传 
脚本 ) 查看 相关 的 资源 。 同 时 ,服务器 需 
配置 正确 才能 存储 文件 。 如 需 帮 助 ， 可 以 联 
系 网 站 托管 商 。 


让 访问 者 上 传 文件 的 步骤 

(1) 输入 <form method="post" enctype= 
"multipart/form-data"。enctype 属性 可 以 确 
保 文件 采用 正确 的 格式 上 传 。 

(2) 接 下 来 , 输入 action="wpload.url1">， 
其 中 的 upload.url 是 处 理 上 传 文件 的 脚本 的 
URL, 

(3) 为 文件 上 传 区 域 输入 标签 ， 以 便 访 问 
者 知道 上 传 什么 文件 (参见 16.6 广 )。 

(4) 输入 <input type="file"， 创建 一 个 
文件 上 传 框 和 一 个 Browse (浏览 ) 按钮 ， 如 
图 16.13.2 所 示 。 

(5) 输入 id="idlabe1"， 这 里 的 id1abel 
跟 第 (3) 步 中 label 的 for 属性 值 相 同 。 

(6) 输入 name="dataname"， 这 里 的 dataname 
用 于 识别 将 要 上 传 的 文件 。 

(7) 如 果 需 要 ， 输 入 size="n"， 这 里 的 1 
是 访问 者 可 以 输入 路 径 和 文件 名 的 字段 的 
砚 充 。 

(8) 如 果 需 要 , 输入 multiple 或 者 multiple= 
"multiple" (HTMLS 中 这 两 种 方式 均 可 ) ， 
这 表示 访问 者 可 以 上 传 一 个 以 上 的 文件 ， 参 
见 图 16.13.1 的 标题 说 明 。 

(9) 输入 > 或 者 />。 

(10) 跟 平常 一 样 结束 表单 ， 包 括 创 建 提 
交 按 钮 ， 输 入 </form> 结束 标签 。 





图 灵 社 区 会 员 wenshanjun 专 享 尊重 版 权 





Browse,., 
Marne ao of TO FO GF of PNG 





图 16.13.2 文件 上 传 区 域 为 用 户 提 供 了 从 其 系 
统 中 选择 文件 的 方式 。 对 于 type="file" 的 input 
元 素 ， 浏 览 郁 会 目 动 创建 Browse (浏览 ) 按钮 。 
Chrome 和 Safari 不 会 创建 框 ， 它 们 只 显示 按钮 。 
浏览 絮 通 常 不 允许 像 对 其 他 表单 元 泰 那 样 对 此 类 
input 设置 样式 





对 于 允许 上 传 的 表单 ， 不 能 使 用 get 
方法 。 
16.14 创建 隐 汤 字段 


隐 沁 字段 可 以 用 于 存储 表单 中 的 数据 ， 
但 它 不 会 显示 给 访问 者 (参见 图 16.14.1 和 
图 16.14.2 )。 可 以 认为 它们 是 不 可 见 的 文本 框 。 
它们 通常 用 于 存储 先前 的 表单 收集 的 信息 ， 
以 便 将 这 些 信息 同 当 前 表单 的 数据 一 起 交 给 
脚本 进行 处 理 ， 如 图 16.14.2 所 示 。 











<form method= post action="your-script.php"> 
<input type=' hidden”name= step- 
Value= 6” /> 


.。 其 他 表单 字段 


<input type="submit" 
value="Submit Form” /> 
</form> 





图 16.14.1 访问 者 不 会 看 到 这 个 输入 框 ， 但 他 们 
提交 表单 的 时 候 ， 名 “step” 和 值 “6” 会 随 着 表 
单 中 从 访问 者 输入 获取 的 数据 一 起 传送 给 服务 需 


创建 隐藏 字段 的 步骤 
(输入 <input type="hidden"。 
(2) 输入 name="datename" ， 这 里 的 dataname 





确定 要 提交 给 服务 硕 的 信息 。 

(3) 输入 value="data"， 这 里 的 data 是 要 
提交 的 信息 本 里 。 它 通常 是 表单 处 理 脚 本 中 
的 一 个 变量 ( 参见 图 16.14.1 ) 。 

(4) 输入 > 或 者 />( 在 HIML5 中 两 种 方 
式 均 可 ) 。 





<form method= post” action= youI-SCITIpt.php > 
<input type=' hidden” name="email" 
Value=" ?= $email ?>" /> 


.。 其 他 表单 字段 ,.， 


<input type="submit" 
value="Submit Form” /> 
</form> 








图 16.14.2 ”创建 隐藏 字段 时 ， 可 以 使 用 脚本 中 的 
变量 将 字段 的 值 设 置 为 访问 者 原来 输入 的 值 (这 个 
示例 使 用 了 PHP 语法) 


什么 时 候 使 用 隐藏 字段 

这 里 有 个 隐藏 字段 非常 方便 的 例子 。 
假设 你 有 一 个 表单 ， 硕 望 让 访问 者 在 提交 
表单 之 前 有 机 会 检查 他 们 输入 的 内 容 。 处 
理 表 单 的 脚本 可 以 向 访问 者 显示 提交 的 数 
据 ， 同 时 创建 一 个 表单 ， 其 中 有 包含 同样 
数据 的 隐藏 字段 。 如 果 访 问 者 布 望 编辑 数 
据 ， 他 们 只 需 后 退 就 可 以 了 。 如 果 他 们 想 
提交 表单 ， 由 于 隐藏 字段 已 经 将 数据 填 好 
了 ， 因 此 他 们 就 不 需要 再 次 输入 数据 了 。 


人 隐藏 字段 出 现在 表单 标记 中 的 位 置 并 
不 重要 ， 因 为 它们 在 浏览 器 中 是 不 可 见 的 。 


不 要 将 密码 、 信 用 卡号 等 敏感 信息 放 
到 隐藏 字段 中 。 即便 它们 不 会 显示 到 网 页 中 ， 
访问 者 也 可 以 通过 查看 HTML 源 代码 看 到 它 
们 (参见 2.8 节 ) 。 
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要 创建 访问 者 可 见 但 不 可 修改 的 表 
单元 素 ， 有 两 种 方法 。 一 种 是 使 用 disabled 
(禁用 ) 属性 (参见 16.16 节 ) 。 另 一 种 是 
使 用 readonly ( 只 读 ) 属性 。 与 禁用 字段 
不 同 ， 只 读 字 段 可 以 获得 焦点 ， 访问 者 可 以 
选择 和 复制 里 面 的 文本 ， 但 不 能 修改 这 些 
文本 。 它 只 能 应 用 于 文本 输入 框 和 文本 区 
域 ， 例 如 ,， <input type="text” id="coupon" 
name= COoupon ”Value= FREE” readonly />。 
还 可 以 使 用 readonly="readonly" 这 样 的 形式 ， 
续 采 二 一样 的 。 


16.15 创建 提交 按钮 


访问 者 输入 的 信息 如 果 不 发 送 到 服务 器 ， 
就 没什么 用 。 应 该 总 是 为 表单 创建 提交 按钮 ， 
让 访问 者 可 以 将 信息 交 给 你 。 提 交 按 钮 可 能 号 
现 为 文本 (参见 图 16.15.1 ~ 图 16.15.3 ) 、 可 能 
是 图 像 (参见 图 16.15.4 和 图 16.15.5 ) ， 也 可 能 
是 两 者 的 结合 (参见 图 16.15.6 和 图 16.15.7 ) 。 








<input type="submit" value="Create Profile" 





class="btn” /> 


16.15.1 ”如 果 不 填 写 name 属性 ， 则 提交 按钮 的 
名 一 值 对 就 不 会 传 给 脚本 。 由 于 通常 不 需要 这 一 信 
息 ， 因 此 这 里 的 做 法 是 有 益 的 


.btn { 
background-color: #da820a; 
border: none; 
border-radius: 4px; 
box-shadow: 2px 2px 2px #333; 


color: #fff; 

mmargin: 12px 0 0 26px; 
padding: 8px; 

text-shadow: 1px 1ipx Opx #777; 


16.15.2 ”通过 使 用 类 ， 我 为 提交 按钮 应 用 了 硼 
景 、 字 体格 式 和 一 些 CSS3 特性 。 因 为 是 类 ， 所 以 
可 以 将 该 样式 重用 到 其 他 按钮 上 








16.1$ 创建 提交 按钮 343 


合生 全 Creating a Form 
ly Creating a Form eV | 
I UnaY Ww alils WiMI MESs3ay ss (YM 


J ltis okay to email me with occasional pr 
products., 


Create [1 


16.15.3 这 里 将 按钮 的 value 设 为 Create 
Profile， 比 起 默认 值 ， 这 样 的 值 对 访问 者 来 说 含义 
更 丰富 (参见 第 一 条 提示 ) 。 如 果 激 活 提 交 按 钮 ， 
就 会 将 表单 数据 发 给 服务 右上 的 脚本 ， 从 而 可 以 利 
用 这 些 信息 





1. 创建 提交 按钮 的 步骤 

() 输入 <input type="submit"。 

(2) 如 果 和 需要 ,输入 value="submit message"， 
这 里 的 submit message 是 将 要 出 现在 按钮 上 
的 文本 。 

(3) 最 后 输入 > 或 者 />。 


2. 创建 着 图 像 的 提交 按钮 

有 时 设计 师 会 创建 一 些 超 出 CSS3 能 力 
(如 渐变 、 阴 影 、 圆 角 等 ) 的 按钮 样式 。 这 时 ， 
可 以 使 用 仅 包 含 图 像 的 input 元 素来 提交 表单 
(参见 图 16.15.4 和 图 16.15.5 ) 。 

(1) 创建 PNG、GIF 或 者 JPEG 图 像 ， 通 
第 最 好 是 PNG， 因 为 文件 尺寸 小 。 

(2) 输入 <input type="image">。 

(3) 输入 src="image.ur1"， 其 中 的 image.url 
是 图 像 在 服务 妖 上 的 位 置 。 

(4) 输 入 alt="description"， 这 里 的 
description 是 当 网 像 无 法 显示 时 需要 出 现 的 
Xs 

(5) 输入 > 或 者 /> 以 结束 图 像 提 交 按 钮 。 














图 灵 社 区 会 员 wenshanjun 专 享 尊重 版 权 





<input type="image" src="button-submit.png" 


" Width="188" height="95" alt="Create Profile" 
Ch 


16.15.4 ”利用 type="image” 可 以 创建 图 像 提交 
按钮 ，width 和 height 属性 是 可 选 的 


Creating a Form 
Creating a Eorm = My 
UnaY WU II II Win MSSsay cs lt 
J- ltisokay to email me with occasional pr 
products. 


AP CREATE PROFILE 


16.15.5 ” 当 用 户 将 鼠标 基 停 在 图 像 提交 按钮 上 
时 ， 浏 览 器 会 将 箭头 替换 为 手 形 图 标 





3. 创建 结合 文本 和 图 像 的 提交 按钮 

使 用 button 元 素 可 以 创建 包含 其 他 
HTML 元 系 〈 而 并 非 仅 包含 简 单 的 文本 信 或 
图 像 ) 的 按钮 ,参见 图 16.15.6 和 图 16.15.7。( 如 
采 要 使 用 button 元 素 ， 注 意 考 虑 IE8 之 前 的 
IE 的 兼容 性 问题 。 更 多 细节 可 以 在 网 上 搜 到 。) 

(1) 输入 <button type="submit">。 

(2) 输入 将 要 出 现在 按钮 中 图 像 左 侧 的 文 
本 ( 如果 有 的 话 ) 。 

(3) 输入 "image.ur1"， 这 里 的 image.wrl 
是 出 现在 按钮 上 的 图 像 名 称 。 

(4) 输入 alt="alternate text"， 这 里 的 
alternate text 是 当 图 像 无 法 显示 时 需要 出 
现 的 文本 。 

(5) 如 果 需 要 ， 添 加 其 他 图 像 属性 。 

(6) 输入 > 或 者 /> 以 结束 图 像 。 

(7) 输入 将 要 出 现在 按钮 中 图 像 右 侧 的 文 
本 ( 如果 有 的 话 ) 。 




















(8) 输入 </button>。 


<button type="submit" class="btn"> 


"<img STC= Check.png” width="21" height="24" 
" alt="" /> Create Profile</button> 





16.15.6 ”button 元 素 可 以 为 提交 按钮 的 内 容 提 
供 更 大 的 灵活 性 。 这 个 元 素 既 包含 图 像 ， 也 包含 文 
本 。button 元 素 还 可 以 包含 其 他 的 HTML 元 素 


个 后 个 Creating a Form 
| ey Creating a Eorm I PN 
LS vndy Ww BTMaT ne wi MGssdayes TO 


J ltisokay to email me with occasional pr 
products. 


A/ Create Profile 


图 16.15.7 除去 那个 对 勾 的 图 像 ， 这 个 按钮 与 
图 16.15.3 中 的 按钮 很 像 ， 因 为 它们 都 有 .btn 类 (人参 
见 图 16.15.2 ) 。 当 鼠标 移 到 这 个 按钮 上 时 ， 指 针 
会 显示 为 一 个 第 头 (参见 图 16.15.3 ) 


如 果 省 略 value 属性 ， 那 么 根据 不 同 
的 浏览 器 ， 提 交 按 钮 就 会 显示 默认 的 Submit 
或 者 Submit Query。 


如 果 有 多 个 提交 按钮 ， 可 以 为 每 个 按 
钮 设置 name 属性 和 value 属性 ， 从 而 让 脚本 
知道 用 户 按 下 的 是 哪个 按钮 。 否则 ， 最 好 省 
略 name 属性 。 


可 以 使 用 button 元 素 创 建 不 包含 图 像 
的 提交 按钮 。 任 何 时 候 ， 如 果 你 的 表单 需要 
一 个 以 上 的 提交 按钮 ， 就 应 避免 使 用 button 
元 素 ， 因 为 针对 这 种 情况 ,不 同 浏览 器 的 行 
为 并 不 完全 一 致 。 
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表单 还 可 以 有 重 置 按 钮 ， 用 于 将 表 16.16 ”禁用 表单 元 素 

冯 数据 还 原 为 页 面 加 载 沪 问 者 填写 

ee 在 某 些 情况 下 ， 你 可 能 不 想 让 访问 者 
2 使 用 表单 中 的 某 些 部 分 。 人 例如， 你 可 能 和 希望 


用 <input type="reset” /> 或 《button type= 、、、 有 
全 所 有 必 填 字段 完成 之 前 禁用 提交 按钮 ， 如 
图 16.16.1 所 示 。 


安 添加 f 去 O ee 
0 村 用 表单 元 素 的 值 不 会 发 送 到 服务 器 ， 
如 果 使 用 键盘 在 页 面 中 导航 ， 它 也 会 被 跷 过 。 








HTMLS 对 type="email"” 和 type= 
"URL" 的 input 添加 了 上 自动 验证 功能 。 对 提交 
按钮 使 用 formnovalidate 属性 可 以 关闭 该 功能 ， 
如 《input type="submit" formnovalidate />。 


<div id="choices"> 


<p> 
<input type="radio" name="how" value="advertisement" id="advertisement” /> 
<label for="advertisement">Advertisement</l1abel> 

</p> 


<p> 
<input type= Tadio ”name= how ”Value= other ”id= other ” /> 
<label for="other">0ther</label> 
</p> 
<p> 
<textarea id="other-description" cols="35" rows="5" placeholder="TV, school, bingo game, 
etc. title="Please describe how you heard about us." disabled="disabled"></textarea> 
</p> 


<input type= Submit ”Value= Submit ”class= btn” /> 
</div> 


</form> 


<!-- 这 块 要 放 到 最 后 ， 刚 好 在 </body> 之 前 --> 

<script src="js/toggle-textarea.js"></script> 
</body> 

</html> 











16.16.1 这 里 对 textarea 元 素 添 加 了 disabled 属性 ， 并 在 页 面 最 底部 引入 了 一 个 JavaScript 文件 。 
该 文件 包含 了 一 段 脚 本 ， 其 作用 是 当 用 户 选 择 Other ( 其 他 ) 单 选 按钮 时 ， 让 textarea 变 为 可 用 的 (如 
图 16.16.2 和 图 16.16.3 所 示 ) 。 选择 其 余 两 个 单 选 按钮 中 的 任意 一 个 , 则 会 禁用 textarea ( 注意 , 在 实践 中 ， 
我 会 使 用 JavaScript 添加 disabled 属性 ， 而 不 是 像 这 样 写 在 HTML 中 。 这 样 ， 禁 用 了 JavaScript 的 访问 者 
仍 可 填写 该 文本 区 域 。 第 19 章 的 toggle-textarea.js 就 实现 了 这 样 的 功能 
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全 与 自 
WEnabling a disabled form element | 二 


Enabling a disabled form element 


How did you hear about us? 


D Advertisement 

CO Email Newsletter 

D FaceSpace 

J Other (please explain if you select) 





TY scheol bingg game ete 





16.16.2 ” 当 Other 单 选 按钮 未 选中 时 ， 文 本 区 
域 是 灰色 的 、 被 禁用 的 ， 用 户 无 法 选中 该 框 并 输入 
内 容 





SA 
| Wy Enabling a disabled form element 


Enabling a disabled form element 








How did you hear about us? 


) Advertisement 

CO Email Newsletter 

L) FaceSpace 

@®@ Other (please explain if you select) 


Read a magazine article on a train|| 





16.16.3 ”由 于 使 用 了 JavaScript， 当 访问 者 选择 
Other 单 选 按 钮 以 后 ， 文 本 区 域 变 成 了 白色 ， 用 户 
可 以 输入 文本 以 提交 到 服务 大 














禁用 表单 元 素 的 方法 

在 表单 元 素 的 开始 标签 后 输入 disabled 
或 者 disabled="disabled"( 两 种 方法 在 
HTMLS 中 均 可 以 ) 。 


可 以 使 用 JavaScript 将 表单 元 素 的 
状态 由 某 用 改 为 可 用 (也 可 以 反 过 来 ) 。 

对 JavaScript 的 讲解 超出 了 本 书 的 范围 ， 但 
我 在 第 19 章 提 供 了 图 16.16.1 引用 的 toggle- 
textarea.js 文件 (参见 19.1 节 ) 。 该 文件 中 
有 一 些 用 于 解释 其 工作 原理 的 注释 。 要 学 习 
JavaScript，eloquentjavascript.net 是 个 不 错 的 


资源 。 





更 多 关于 script 元 素 的 信息 参见 
第 19 章 。 
有 要 理解 disabled 和 readonly 属性 的 


区 别 ， 参 见 16.14 节 最 后 一 条 提示 。 


16.17 根据 状态 为 表单 设置 样式 


有 时， 你 可 能 需要 根据 表单 的 状态 或 是 
否 必 须 包 含 某 个 属性 的 情况 设置 不 同 的 样式 。 
例如 ， 你 可 能 需要 将 必 有 项 字段 与 其 他 字段 在 
样式 上 区 分 开 。 

你 可 能 会 想起 本 书 其 他 地 方 ( 如 9.7 节 ) 
介绍 过 的 伪 类 。 不 过 ，CSS 提供 了 其 他 一 些 
根据 表单 元 素 状态 设置 其 样式 的 伪 类 。 其 中 
的 大 多 数 都 是 CSS3 新 增 的 。 我 总 结 了 其 中 得 
到 浏览 器 广泛 文 持 的 一 些 ， 如 表 16.17.1 所 示 。 
其 他 的 参见 Peter-Paul Koch 的 列表 一 一 打开 
www.quirksmode.org/css/selectors/ 并 拖 到 UI 
state pseudo-classes( UI 状态 伪 类 ) 部 分 。 
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表 16.17.1 伪 类 
选 择 器 应 ”用 浏览 器 支持 情况 
: focus 获得 焦点 的 字段 ( 参见 图 16.17.1 和 图 16.17.2 ) IE8+ 及 其 他 
:checked 选中 的 单 选 按钮 或 复 选 框 ( 参见 图 16.17.3 和 图 16.17.4 ) IE9+ 及 其 他 
:disabled 具有 disabled 属性 的 字段 ( 参见 图 16.17.5 ) IE9+ 及 其 他 
:enable 与 :disabled 相反 IE9+ 及 其 他 
:required 具有 required 属性 的 字段 (参见 图 16.17.6 和 图 16.17.7 ) IE10+、Safari 5+ 及 其 他 
:optional 与 :required 相反 IE10+、Safari 5+ 及 其 他 
:invalid 其 值 与 pattern 属性 给 出 的 模式 不 匹配 的 字段 ; 或 值 不 是 有 效 ” 下 10+、Safari 5+ 及 其 他 
电子 邮件 格式 的 电子 邮件 框 ， 值 不 是 有 效 URL 格式 的 URL 框 ， 
以 及 任何 标记 为 fequired 但 值 为 空 的 字段 (参见 提示 ) ， 如 
图 16.17.8 和 图 16.17.9 所 示 
:valid 与 :invalid 相反 IE10+、Safari 5+ 及 其 他 


注意 : “IE9+ 及 其 他 ” 指 的 是 Internet Explorer 9 及 之 后 的 版 本 文 持 该 选择 希 ， 其 他 现代 浏览 需 也 文 持 该 选择 角 。 其 


他 的 说 明 也 是 类 似 的 


input:focus， 
textarea:focus { 


background-color: greenyellow; 


} 


16.17.1 这 条 规则 为 任意 获得 焦点 的 input ( 包 
括 提 区 按钮 ) 或 textarea 请 加 了 背景 色 。 要 定位 
特定 的 input 类 型 ， 可 以 包含 一 个 属性 选择 禹 ， 如 
input[type="submit"] :focus { backgroundcolor: 


#ff8c00; } 就 仅 为 获得 焦点 的 提交 按钮 设置 样式 


City: | | 














16.17.2 ”第 一 个 字段 获得 了 焦点 ， 因 此 它 的 背 
景 是 浅 绿 色 的 (虽然 并 不 是 最 舒服 的 颜色 ， 但 能 说 
明 问 题 ) 





input:checked + label { 
color: green; 


} 


16.17.3 ”这 条 规则 为 选中 的 单 选 按钮 或 复 选 框 
(或 指定 了 checked 属性 的 单 选 按钮 或 复 选 框 ) 添 
加 样式 ， 效 果 如 网 16.17.4 所 示 








Gender: © Male 
@ Female 


加 ltis okay to email me With messages from other Users, 


-| ltisokay to email me with occasional promotions about our other 
products. 


16.17.4 





只 有 选中 的 单 选 按钮 和 复 选 框 是 绿色 的 


textarea:disabled { 
background-color: #ccc; 
border-color: #999; 
color: #666; 





16.17.5 ”这 是 用 于 图 16.16.2 中 代码 的 样式 规则 


input:required, 
textarea:required { 


border: 2px solid #000; 





} 


16.17.6 ”所 有 必 填 的 input 和 textarea 元 素 会 
有 一 个 更 醒目 的 边框 


针对 特定 状态 设置 表单 元 素 样 式 的 步 又 
(1) 输入 selector， 这 里 的 selector 包含 
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348 第 16 章 表单 
表 16.17.1 中 显示 的 一 种 或 多 种 状态 ， 接 春 输 
入 { 开 始 样式 规则 的 声明 。 

(2) 输入 你 想 为 该 状态 设置 的 任何 
property: value; 声明 。 关 于 CSS 属性 的 讲 
解 是 从 第 8 章 开 始 的 。 

(3) 输入 } 结束 样式 规则 的 声明 。 








Last Name: | 


Email: | yourname 人 example.com 





16.17.7 ”如 你 所 见 ， 只 有 First Name (名 ) 字 
段 是 必 填 的 。 红 色 的 星 号 并 不 是 图 16.17.6 中 的 
CSS 产生 的 效果 。 对 于 必 填 的 字段 ， 在 其 标签 中 添 
加 星 号 或 “ 必 填 ”字样 是 一 种 常见 的 做 法 ， 因 此 这 
里 添加 了 星 号 。 这 样 ， 不 支持 :required 的 浏览 逢 
也 会 表现 出 这 是 一 个 必 填 字段 的 样子 











input[type="email"]:invalid { 
color: red; 


} 


input[type="email"]:valid { 
color: black; 


) 


图 16.17.8 ”电子 邮件 框 中 的 值 如 果 不 是 有 效 的 电 
子 邮件 地 址 ， 该 框 中 的 字 就 会 变 成 红色 的 


ER 页 面 一 开始 加 载 就 会 应 用 :invalid 
状态 ， 因 此 ， 根 据 你 所 设置 的 状态 ， 有 可 
能 会 出 现 一 些 意外 的 结果 。 人 例如， 如果 规 
则 是 input:invalid { background-color: 
pink; }， 那 么 必 填 的 input 字段 在 用 户 填 
写 任 何 内 容 之 前 就 会 显示 粉红 色 的 背景 。 
(任何 标记 为 required 但 值 为 空 的 字段 会 
被 认为 处 于 无 效 状 态 。) 为 了 将 必 填 字段 
排除 在 该 规则 之 外 ， 可 以 使 用 :not 伪 类 ， 
如 input:invalid:not(:required) { border: 
2px solid red; }。 除 了 IE9 之 前 的 版 本 ， 所 
有 浏览 器 都 支持 :not 伪 类 。 





Email: |myaddress@ 


myaddress@mysite.coml 





16.17.9 输入 的 内 容 都 是 红色 的 ， 直 到 输 完 一 
个 有 效 的 电子 邮件 地 址 ( 此 时 输入 的 内 容 会 变 成 黑 
色 的 ) 


上 一 条 提示 讲 到 的 情境 还 有 一 种 应 对 
方法 ， 即 提交 表单 时 ,使 用 JavaScript 为 form 
元 素 添加 一 个 类 ， 并 在 样式 表 中 为 该 类 创建 
无 效 样式 ， 例 如 ，.Ssubmitted input:invalid 
{ background-color: red; }。 示 例 代 码 及 
其 他 提示 参见 Peter Gasston 的 文章 (位 于 


htmlS doctor.com/css3-pseudo-classes-and-htmlS- 


forms ) 。 
对 于 浏览 器 无 法 识别 的 伪 类 ， 浏览 


器 会 直接 忽略 其 中 的 样式 规则 。 对 于 Web 设 
计 人 员 和 开发 人 员 来 说 ， 这 通常 是 可 以 接受 
的 一 一 使 用 功能 较 强 的 浏览 器 的 访问 者 获得 
增强 的 体验 。Keith Clark 的 Selectivzr ( http:// 
selectivizr.com/ ) 是 一 个 用 于 让 旧 浏 览 器 理解 
这 些 选 择 器 的 JavaScript 文件 。 


使 用 属性 选择 器 为 表单 设置 样式 
别 忘 了 ， 还 可 以 使 用 属性 选择 器 定位 
拥有 特定 属性 的 表单 字段 ， 例 如 : 
DD [autocomplete| 
DQ [autofocus | 
口 [multiple] ( 仅 限 于 电子 邮件 框 和 
文件 上 传 框 ) 
口 [placeholdez 
口 [type="email"] ( 参见 图 16.17.8 ) 、 
[type="url"] 等 ( 其 他 的 输入 框 类 
型 都 可 以 像 这 样 使 用 ) 
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本 章 内 容 
D 第 三 方 插件 与 步 和 人 原生 
口 视频 文件 格式 


口 在 网 页 中 添加 单个 视频 

口 为 视频 添加 控件 和 上 自动 播放 

口 为 视频 指定 循环 播放 和 海报 图 像 
口 阻止 预 加 载 视频 

口 使 用 多 种 来 源 的 视频 和 备用 文本 
口 提供 可 访问 性 

D 音频 文件 格式 

口 为 网 页 添加 带 控 件 的 音频 文件 
口 自动 播放 、 循 环 和 预 加 载 音 频 
口 提供 带 有 备用 设置 的 多 种 音频 来 源 
口 添加 具有 备用 Flash 的 视频 和 音频 
口 高 级 多 媒体 

口 更 多 资源 

















在 页 面 上 添加 电影 、 声 音 、 图 像 和 动画 
可 以 增强 访问 者 的 体验 。 在 HTML5 出 现 之 
前 ， 为 网 页 添加 多 媒体 的 唯一 办 法 就 是 使 用 
第 三 方 的 插件 ( 如 Adobe Flash Player 和 苹果 
的 QuickTime ) 。 通 过 引入 原生 的 多 媒体 ( 浏 
览 器 负责 一 切 ) ，HTMLS 改变 了 这 一 状况 。 

并 非 所 有 支持 HTMLS 的 浏览 器 都 支持 相 
同 格式 的 视频 和 音频 格式 。 你 将 在 本 章 学 到 
如 何 提供 多 种 格式 (以 及 为 不 支持 任何 一 种 
格式 的 浏览 器 提供 备用 Flash ) ， 让 不 同 的 访 
问 者 都 能 正常 使 用 。 





音频 和 其 他 多 姓 体 


注意 ， 本 章 的 目的 是 介绍 多 媒体 Web 文 
件 ， 重点 放 在 了 所 需 的 HTML5 代码 上 。 这 里 
不 会 讲解 如 何 创建 多 媒体 内 容 ， 只 会 讲解 如 
何 让 访问 者 可 以 浏览 它们 。 


17.1 第 三 方 插件 和 步 入 原生 


如 上 文 所 述 ， 在 HTML5 出 现 之 前 ， 可 
以 通过 第 三 方 插 件 为 网 页 添加 首 频 和 视频 ， 
但 这 样 做 有 一 些 问题 。 在 某 个 浏览 旭 中 移入 
Flash 视频 的 代码 在 为 一 个 浏览 带 中 可 能 不 
起 作用 ， 也 没有 包围 它 的 优雅 方式 。 而 且 ， 
这 样 做 会 影响 用 户 访 问 网 站 的 体验 ， 因 为 像 
Flash 这 样 的 插件 会 占用 大 量 的 计算 资源 。 有 
时 ， 浏 览 硕 会 变 慢 ， 甚 至 前 省 。 

考虑 到 这 些 问题 ，HTMLS 规范 中 添加 了 
原生 的 多 媒体 。 这 样 做 有 很 多 好 处 : 速度 更 
快 〈 任 何 浏览 硕 原 生 的 功能 势必 比 插件 要 快 
一 些 ) ， 媒 体 播放 按钮 和 其 他 控件 内 置 到 浏 
览 融 ， 对 插件 的 依赖 极 大 地 降低 (但 也 并 非 
完全 不 依赖 ， 这 在 后 面 将 会 看 到 ) 。 

对 于 任何 一 套 标准 ， 都 有 关于 HIML5 原 
生 多 媒体 及 其 支持 的 文件 格式 的 问题 。 最 初 ， 
HTMLS 规范 指定 了 两 种 兼容 HTMLS 的 浏览 
需 必 须 文 持 的 媒体 格式 (分别 对 应 音频 和 视 
频 ) 。 这 本 来 是 很 好 的 ， 但 并 非 所 有 的 厂商 都 
愿意 遵循 。 这 意味 着 你 需要 为 你 的 媒体 提供 一 
种 以 上 的 格式 才能 让 它 在 兼容 HTMLS5 的 浏览 
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顺 中 播放 。 后 面 我 们 将 详细 地 讨论 这 些 问 题 。 

当 苹 果 宣 布 不 再 在 其 移动 设备 (包括 
iPhone 和 iPad ) 上 文 持 Flash 时 ，HTML5 及 
原生 媒体 就 变 得 更 为 实用 了 。 随 着 这 些 设备 
的 日 渐 普及 ， 过 去 播放 媒体 文件 对 Flash 的 依 
束 正 在 迅速 削减 ， 因 此 迫切 需要 一 种 新 的 解 
决 方案 。 于 是 ，HTML5 原生 多 媒体 进入 了 这 
一 领域 并 展现 出 了 强大 的 力量 ， 因 为 苹果 移 
te 
设备 也 迅速 








数字 版 权 管 理 (DRM ) 

在 谈 入 音频 和 视频 文件 的 过 程 中 ， 你 
”1 
看 得 见 指向 源 文 件 的 URL， 从 而 利用 它 下 
载 并 “ 盗 取 ”你 的 内 容 ， 就 像 识 入 的 图 像 
以 及 HTML、JavaScript 和 CSS 源 文件 一 样 。 
对 此 我 们 毫 无 办 法 。 

尽管 已 经 有 了 一 些 相 关 的 讨论 ， 但 
HTMLS 并 没有 提供 任何 保护 媒体 内 容 的 方 
法 。 因 此 , 如 果 你 很 在 意 对 媒体 文件 的 保护 ， 
那么 暂时 不 要 使 用 HIMLS 原生 多 媒体 。 


17.2 ”视频 文件 格式 


HTMLS 文 持 三 种 视频 文件 格式 ( 即 编 解 
但 入 ) 。 

口 Ogg Theora 使 用 的 文件 扩展 名 为 .ogg 
或 .ogv， 支 持 它 的 浏览 絮 包 括 Firefox 
3.5+、Chrome 4+、Opera 10.5+ 以 及 
Android 版 Firefox。 

口 MP4( H.264 ) 使 用 的 文件 扩展 名 为 
.mp4 或 .m4v， 文 持 它 的 浏览 硕 包 括 
Safari 3.2+、Chrome 4-? ( 参见 提示 ) 
Internet Explorer 9+、 iOS ( Mobile 
Safari ) 和 Android 2.1+、Android 版 
Chrome、Android 版 Firefox 和 Opera 





Mobile 11+。 

口 WebM 使 用 的 文件 扩展 名 为 .webm， 
支持 它 的 浏览 帮 包 括 Firefox 4+、 
Chrome 6+、 Opera 10.6+、 Android 
2.3+、Android 版 Chrome、Android 版 
Firefox 和 Opera Mobile 14。 


什么 是 编 解 码 器 

编 解 码 器 是 使 用 压缩 算法 对 数据 的 数 
字 流 进行 编码 和 解码 ， 使 之 更 适合 播放 的 

编 解 码 器 的 目标 通常 是 在 保证 音频 和 
视频 所 能 达到 的 最 高 质量 的 情况 下 减 小 文 
件 尺寸 。 

当然 ,不 同 编 解 码 器 的 表现 是 不 一 致 的 。 


设置 MIME 类 型 

在 有 的 浏览 器 中 ， 如 果 没 有 设置 正确 
的 MIME 类 型 ， 媒 体 文件 就 不 会 播放 。 如 
果 你 的 网 站 运行 在 Apache Web 服务 器 上 
(很 可 能 是 它 ) ， 可 以 通过 .htaccess 文件 
MME 0 TE 
常 与 主页 一 起 位 于 网 站 的 根 目 录 。 

这 是 可 以 在 .htaccess 文件 中 添加 的 
MIME 类 型 ( 可 以 使 用 文本 编辑 器 编辑 该 文件 )。 

AddType video/ogg .ogv 

AddType video/mp4 .mp4 

AddType video/webm .webm 


AddType audio/ogg .ogg 
AddType audio/mp3 .mp3 


如 果 你 的 网 站 已 经 拥有 该 文件 ， 将 其 
命名 为 ahtaccess， 从 Web 服务 器 上 下 载 下 
来 ， 添 加 上 述 MIME 类 型 ， 再 上 传 到 服务 

器 上 ， 重 新 命名 为 .htaccess。 如 果 你 的 网 
ee 可 以 重新 创建 一 个 。 

对 于 更 新 .htaccess， 如 有 问题 ， 请 联 
系 Web 托管 商 。 
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转换 文件 格式 

如 果 你 已 经 拥有 一 个 视频 资源 并 布 望 
将 它 转换 为 其 他 的 文件 格式 ， 有 大 量 的 工 
具 可 以 帮 你 完成 这 一 任务 。 下 面 就 是 两 个 
这 样 的 工具 : 

口 Miro Video Converter (www. 

mirovideo-converter.com ) 

口 HandBrake (http://handbrake.fr ) 

开发 者 至 少 需要 为 视频 提供 两 种 格式 
(MP4 和 WebM ) ， 才 能 确保 获得 所 有 兼容 

HTMLS 的 浏览 器 的 支持 。 


Google 曾经 说 过 在 Chrome 中 放弃 
对 MP4 的 支持 ， 不 过 他 们 没 这 么 做 。Firefox 
正在 逐步 提供 对 MP4 的 支持 。 在 桌面 端 

Windows 7+ 四 次 提供 了 对 它 的 支持 ， 不 过 需 


要 用 户 在 机 器 上 安装 相应 的 编 解 码 器 。 
如 果 用 户 的 机 器 上 安装 了 WebM， 那 


i IE 9+ 或 Safari 中 都 可 以 正常 运行 


1 7.3 在 网 页 中 添加 单个 视频 


要 在 HIMLS 网 页 中 添加 视频 ， 需 要 使 
用 新 的 video 元 素 。 这 一 过 程 再 简单 不 过 了 ， 
如 图 17.3.1 所 示 。 浏览 器 会 计算 视频 的 尺寸 ， 
并 在 加 载 文件 后 以 计算 的 尺寸 显示 视频 ， 参 
见 图 17.3.2。 开 发 人 员 也 可 以 自行 设 定 视频 尺 
寸 ， 如 图 17.3.3 所 示 。 
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如 果 浏 览 iA i 
aa 


能 识别 你 指定 的 视频 格式 ， 
参见 图 17.3.4。 


<body> 


<video src="paddle-steamer.webm"></video> 
</body> 
</html> 





图 17.3.1 指定 单个 WebM 视频 ( 不 含 控件 ) 


Webhl Video 





图 17.3.2 默认 情况 下 ， 视 频 会 暂停 在 第 一 帧 ， 
目前 我 们 得 到 的 视频 没有 播放 按钮 ， 也 就 是 不 能 观 
看 ! 下 一 节 会 纠正 这 个 问题 


<body> 
<video src="paddle-steamer.webm" 


» width="369" height="208"></video> 
</body> 
</htm]> 





图 17.3.3 这 里 为 视频 设置 的 尺寸 符合 其 正常 大 
小 ， 因 此 其 效果 与 图 17.3.3 相同 。 不 过 ， 同 图 像 一 
样 ， 可 以 使 用 其 他 大 小 的 width 和 height 值 ， 浏 
览 融 会 对 视频 进行 缩放 ， 并 尽 可 能 地 保证 质量 
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WebN Videe 


司 日 日 
| Q webm-video.html 


my” FT LL Eh - 巡 























17.3.4 像 Safari 这 样 不 支持 WebM 的 浏览 锅 
会 显示 一 片 空白 。 这 并 不 好 ! 后 面 会 介绍 如 何 指定 
多 种 视频 格式 ， 从 而 文 持 各 种 的 浏览 天 





表 17.3.1 
属 性 

src( 源 ) 
autoplay (日 动 播放 ) 
controls ( 控件 ) 
muted ( 静音 ) 
loop〈 循 环 ) 
poster (海报 ) 
width ( 宽度 ) 
height ( 高 度 ) 
preload( 预 加载 ) 


指定 视频 文件 的 URL 


让 视频 静音 
让 视频 循环 播放 





当 视 频 可 以 播放 时 立即 开始 播放 
深 加 浏览 带 为 视频 设置 的 默认 控件 


1. 在 网 页 中 添加 单个 视频 的 步骤 

(1) 获取 视频 资源 。 

(2) 输入 <video src="my-video.ext"></video>， 
这 里 的 -video.ext 是 视频 文件 的 位 置 、 名 
称 和 扩展 名 。 就 这 人 么 简单 (参见 图 17.3.2 和 
图 17.3.4) ! 


2. video 属性 

除了 src， 还 有 哪些 属性 可 以 用 在 video 
元 兹 上 了 呢 ? 表 17.3.1 列 出 了 这 些 属性 。 其 中 
的 某 些 属性 为 视频 提供 了 很 高 的 灵活 性 。 


video 属性 


摘 ” 述 





指定 视频 加 载 时 要 显示 的 图 像 ( 而 不 显示 视频 的 第 一 帧 ) 。 接 受 所 需 图 像 文 件 的 URL 
视频 的 宽度 ( 以 像素 为 单位 ) ， 通 常 默 认为 300 

视频 的 高 度 ( 以 像素 为 单位 ) ， 通常 默 认为 150 

告诉 浏览 需要 加 载 的 视频 内 容 的 多 少 。 
D_none 表示 不 加 载 任 何 视频 





可 以 是 以 下 三 个 值 : 


D metadata 表示 仪 加 载 视频 的 元 数据 ( 如 长 度 、 尺 寸 等 ) 
D auto 表示 让 浏览 硕 决 定 怎样 做 〈 这 是 殉 认 的 设置 ) 


17.4 为 视频 添加 控件 和 自动 播放 


目前 仅 向 你 展示 了 在 网 页 中 添加 视频 的 
最 简单 的 方法 ， 而 示例 中 的 视频 甚至 不 会 自 
动 开始 播放 , 因为 我 们 没有 让 它 这 样 做 ,此 外 ， 








访问 者 也 不 能 开始 播放 视频 ， 因 为 播放 佛 没 
有 显示 任何 控件 。 





很 容易 就 可 以 通过 图 17.4.1 中 的 代码 改 
变 这 种 情况 。controls 属性 会 告诉 浏览 大 添 





加 一 侄 用 于 控制 视频 播放 的 控件 。 每 个 浏览 
希 都 有 目 己 默认 的 控件 ， 它 们 看 起 来 都 不 一 
样 (参见 图 17.4.2 ~ 图 17.4.6)。 

通常 ， 只 有 用 户 点 击 播 放 按钮 后 ， 视 频 
才 会 开始 播放 。 可 以 添加 autoplay 属性 ， 让 
视频 自动 播放 (如 图 17.4.7 所 示 ) 。 
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<body> 





<Vvideo src="paddle-steamer.webm" 
» width="369" height="208" controls> 
> </video> 
</body> 
</html> 
17.4.1 添加 单个 WebM 视频 ( 这 次 是 包含 控 
件 的 ) 





图 17.4.2 ”Firefox 中 的 视频 控件 。 从 这 里 可 以 看 
到 Firefox 中 的 视频 比 其 他 浏览 硕 中 的 视频 长 1 秒 


作 
“有 


0:15 Er 太公 国 


RE EL | rs ER 








17.4.4 ”Internet Explorer 10 中 的 视频 控件 
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17.4.6 Safari 中 的 视频 控件 


<body> 
<video src="paddle-steamer.webm" 


> width="369" height="208" autoplay 
—* controls></video> 

</body> 

</html> 





17.4.7 ”现在 ，video 元 素 有 了 表 17.3.1 中 的 三 
个 属性 。 由 于 有 autoplay， 因 此 视频 会 自动 播放 。 
由 于 有 controls， 访 问 者 有 了 和 暂停 按钮 。 这 些 属性 
出 现 的 顺序 无 关 紧 要 





1. 为 视频 添加 控 : 件 


输入 <video src="my-video.ext" controls> 
</video>， 其 中 my-video.ext 指 回 你 的 视频 文件 。 


2. 为 视频 添加 目 动 播放 


输入 <video src="my-video.ext" autoplay 
这 里 的 my-vzdeo.ext 指 





controls></video>, 


回 你 的 视频 文件 。 
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如 果 浏 览 器 不 支持 某 种 视频 格式 

如 果 查 看 代码 示例 (参见 图 17.4.1 和 
图 17.4.7 ) 的 浏览 器 不 支持 你 使 用 的 视频 文 
件 格 式 ， 它 会 显示 视频 的 控件 条 ， 或 者 显 
示 一 个 空 的 白色 撼 形 区 域 (大 多 数 情况 下 
是 这 样 ) ， 或 者 显示 海报 图 像 (前提 是 通 
过 poster 属性 指定 了 海报 ) 。 

例 如 ，JInternet Explorer 和 Safari 不 支 
持 WebM， 但 支持 MP4。 为 了 在 图 17.4.4 
和 图 17.4.6 中 演示 它们 的 播放 控件 ， 我 创 
建 了 同时 使 用 MP4 和 WebM 格式 的 页 面 。 
关于 实现 方法 ， 参 见 17.7 节 。 

如 果 视 频 没 有 通过 width 和 height 指 
定 尺 寸 ， 空 的 答 形 通常 为 300 像素 x150 
像素 大 小 。 如 果 和 包含 了 controls， 但 使 用 
了 一 种 E10 不 支持 的 格式 ， 它 会 显示 一 个 
空白 的 和 撼 形 , 以 及 Invalid Source( 无 效 来 源 ) 
的 字样 。 


布尔 类 型 的 属性 
回想 第 工 章 ， 你 应 该 能 记得 ， 布 尔 类 
型 的 属性 ( 如 controls 和 autoplay) 不 
需要 指定 值 ， 因 为 它们 是 在 几 个 值 之 间 进 
行 选择 。 无 论 采 取 哪 种 方式 ， 它 们 出 现在 
video 和 audio 元 素 中 产生 的 效果 是 一 样 的 。 
本 书 的 示例 都 没有 为 这 些 布 尔 类 型 的 
属性 指定 值 ， 不过， 图 17.4.7 中 的 代码 也 
可 以 写作 : 
<video src="paddle-steamer.webm" 


controls="controls" autoplay="autoplay"> 
</video>. 


17.5 为 视频 指定 循环 播放 和 海 
报 图 像 


不 仅 可 以 将 视频 设 为 自动 播放 ， 还 可 以 
将 它 设 为 持续 播放 ， 直 到 停止 ， 如 图 17.5.1 
所 示 。 (不 过 这 一 做 法 并 不 推荐 ， 考 虑 一 下 
用 户 的 感受 就 知道 原因 了 。) 要 实现 循环 播放 ， 
只 需要 使 用 autoplay 和 loop 属性 。 

如 采 不 设置 autoplay 属性 ， 通 帝 浏 览 禹 
会 在 视频 加 载 时 显示 视频 的 第 一 帧 。 你 可 能 想 
对 此 作出 修改 ， 指 定 你 自己 的 图 像 。 这 可 以 通 
过 海报 图 像 实现 ， 参 见 图 17.5.2 和 图 17.5.3。 











<body> 
<Vvideo src="paddle-steamer.webm" 


width="369" height="208" autoplay 
loop></video> 

</body> 

</html> 





17.5.1 设置 了 自动 播放 和 循环 播放 的 单个 
WebM 视频 。 如 果 这 里 不 设置 controls， 访 问 者 就 
无 法 停止 视频 ! 因此 ， 如 果 将 视频 指定 为 循环 ， 最 
好 包含 controls。 即 便 如 此 ， 自 动 循环 播放 的 视频 
也 可 能 让 访问 者 非常 不 诡 


<body> 
<Vvideo src="paddle-steamer.webm" 
width="369" height="208" 


poster="paddle-steamer-poster.jpg" 
controls></video> 

</body> 

</html> 





17.5.2 ”指定 了 海报 图 像 ( 当 页 面 加 载 并 显示 视 
频 时 显示 该 图 像 ) 的 单个 WebM 视频 ( 含 控 件 ) 


1. 为 视频 添加 自动 播放 和 循环 播放 

输入 <video src="my-video.ext" autoplay 
loop></video>， 这 里 的 Wy-video.ext 指 回 你 
的 视频 文件 。 
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17.5.3 ”显示 海报 图 像 的 视频 。 在 这 个 例子 中 ， 
图 像 是 取 目 视频 本 身 的 一 幅 屏 医 堆 图 





2. 为 视频 指定 海报 图 像 

输入 video src="my-video.ext" controls 
poster="my-poster. jpg"></video>, 其 中 , my- 
video.ext 指 回 你 的 视频 文件 ，my-poster. jpg 
是 想 用 做 海报 图 像 的 图 像 。 


17.6 ”阻止 视频 预 加 载 


如 果 认 为 用 户 观 看 视频 的 可 能 性 较 低 
( 如 该 视频 并 不 是 页 面 的 主要 内 容 ) ， 那 么 
可 以 告诉 浏览 姨 不 要 预先 加 载 该 视频 ， 参 见 
图 17.6.1。 这 样 能 万 省 市 宽 ， 尤 其 对 于 移动 设 
备用 户 来 说 好 处 多 多 。 

对 于 设置 了 preload="none" 的 视频 ， 在 
初始 化 视频 之 前 ， 浏 览 硕 显示 视频 的 方式 并 
不 一 样 (参见 图 17.6.2 和 图 17.6.3 ) 。 


<body> 
<video src="paddle-steamer.webm" 


下 Preload= none” controls></video> 
</body> 
</html> 


17.6.1 页 面 完 全 加 载 时 也 不 会 加 载 的 单个 
WebM 视频 。 仅 在 用 户 试 着 播放 该 视频 时 才 会 加 载 
它 。 注 意 我 省 略 了 width 和 height 属性 
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图 17.6.2 
频 。 如 你 所 见 ， 什 么 也 不 会 显示 ， 因 为 浏览 带 没 有 
得 到 关于 该 视频 的 任何 信息 ( 连 尺 寸 都 不 知道 ) ， 
也 没有 指定 海报 图 像 。 如 采用 户 播 放 视 频 ， 浏 览 带 
会 获取 视频 的 太 寸 ， 并 调整 视频 大 小 


在 Firefox 中 将 preload 设 为 none 的 视 








0:04 可 ese 








个 空白 的 起 形 。 这 时 ， 控 制 组 件 的 大 小 比 访问 者 播 
放 视 频 时 (下 ) 显示 的 组 件 要 罕 一 些 
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告诉 浏览 器 不 预先 加 载 视频 的 步骤 

输 入 <video src="my-video.ext" 
preload="none”controls></video>， 这 里 的 
my-video.ext 指 回 你 的 视频 文件 。 


其 他 预 加 载 设 置 

preload 的 默认 值 是 auto。 这 会 让 浏览 
器 具有 用 户 将 要 播放 该 视频 的 预期 ， 从 而 
做 好 准备 , 让 视频 可 以 很 快 进入 播放 状态 。 
浏览 器 会 预先 加 载 大 部 分 视频 甚至 整个 视 
频 。 因 此 ， 在 视频 播放 的 过 程 中 对 其 进行 
多 次 开始 、 暂 停 的 操作 会 变 得 更 不 容 刀 ， 
因为 浏览 器 总 是 试 着 下 载 较 多 的 数据 让 访 
问 者 观看 。 

在 none 和 auto 之 间 有 一 个 不 错 的 中 
间 值 ， 即 preload="metadata"。 这 样 做 会 
让 浏览 器 仅 获取 视频 的 基本 信息 , 如 尺寸 、 
时 长 芮 至 一 些 关键 的 帧 。 在 开始 播放 之 前 ， 
浏览 器 不 会 显示 和 白色 的 答 形 ， 而 且 视 频 的 
尺寸 也 会 与 实际 尺寸 一 致 。 

使 用 metadata 会 告诉 浏览 器 ， 用 户 的 
连接 速度 并 不 快 ， 因 此 需要 在 不 妨碍 播放 
的 情况 下 尽 可 能 地 保留 带宽 资源 。 


17.7 使 用 多 种 来 源 的 视频 和 备 
用 文本 

切 看 起 来 都 很 棒 ， 不 过 你 也 应 该 注意 到 
了 ,前 面 所 有 的 例子 都 只 用 了 一 个 视频 文件 ( 同 
时 意味 看 只 有 一 种 格式 ) 。 你 已 经 知道 了 ， 要 
获得 所 有 兼容 HTML5 的 浏览 器 的 支持 ， 至 少 
需要 提供 两 种 格式 的 视频 : MP4 和 WebM。 

如 何 做 到 呢 ? 这 时 就 要 用 到 HITMLS 的 
source 元 系 了 。 通 常 ，Ssource 元 系 用 于 是 
义 一 个 以 上 的 媒体 元 素 ( 在 这 个 例子 中 为 
video ) 的 来 源 。 























一 个 video 元 系 中 可 以 包含 任意 数量 
的 source 元 系 ， 因 此 为 我 们 的 视频 定义 两 
种 不 同 的 格式 是 相当 容易 的 ， 如 图 17.7.1 所 
示 。 浏 览 融会 加 载 第 一 个 它 文 持 的 source 元 
系 引 用 的 文件 格式 ， 并 忽略 其 他 的 来 源 (如 
图 17.7.2 和 图 17.7.3 所 示 )。 无 法 播放 
HTMLS5 视频 的 浏览 妖 则 会 显示 你 提供 的 消息 
中 的 备用 链接 ( 如 图 17.7.1 所 示 ) 。 








<body> 
<video width="369" height="208" controls> 
<source src="paddle-steamer.mp4" 
type="video/mp4"> 
<source src="paddle-steamer.webm" 


type="video/webm"> 
<p><a href="paddle-steamer.mp4"> 
Download the video</a></p> 
</Video> 
</body> 
</html> 





图 17.7.1 这 里 为 视频 定义 了 两 个 源 : 一 个 MP4 
文件 和 一 个 WebM 文件 。 (注意 video 开始 标签 中 
没有 像 之 前 指定 单个 视频 来 源 时 使 用 的 src 属性 。) 
旧 的 浏览 圳 则 只 会 显示 pp 元 素 中 的 文本 〈 人 参见 
图 17.7.4 )。 要 确保 备用 链接 或 文本 位 于 video 里 面 ， 
不 然 所 有 的 浏览 妖 都 会 显示 它 














图 17.7.2 ”IE10 等 支持 MP4 的 文件 会 加 载 paddle- 
steamer.mp4 
1. 指定 两 种 不 同 的 视频 来 源 《〈《 市 有 备用 


言 息 ) 


(1) 获取 视频 资源 ( 这 次 需要 两 个 ) 。 
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(2) 输入 《video controls> 开始 video 元 
素 〈 含 球 认 控件 集 ) 。 

(3) 输入 <source src="my-video.mp4" type= 
"video/mp4">， 这 里 的 Wy-video.mp4 是 MP4 
视频 源 文 件 的 名 称 。 

(4) 输入 <source src="my-video.webm"type= 
"video/webm">， 这 里 的 Ww-video.webm 是 WebM 
视频 源 文件 的 名 称 。 

(5) 为 日 浏览 大 输入 备用 链接 或 者 备用 文 
本 信息 ， 参 见 图 17.7.4。 

(6) 输入 </video> 结束 video 元 素 。 


2. 多 个 媒体 源 的 更 多 信息 

接 下 来 我 们 将 学 习 source 元 素 的 各 种 可 
用 的 属性 ， 不 过 在 此 之 前 ， 不妨 先 简单 地 了 
解 一 下 为 同一 媒体 指定 多 个 来 源 的 工作 原理 。 

当 浏 览 器 发 现 video 元 素 时 ， 首 先 会 查 
看 该 元 素 本 身 是 否定 义 了 src。 如 果 没 有 ， 就 
会 检查 source 元 系 。 浏 览 大 会 逐个 查看 这 些 
来 源 ， 直 到 找到 它 可 以 播放 的 一 个 来 源 。 一 
日 找到 这 样 一 个 ， 就 会 播放 它 并 忽略 其 他 的 
来 源 。 

在 前 一 个 例子 中 ，Safari 会 播放 MP4 文 
件 (参见 图 17.7.2 ) 并 完全 忽略 WebM 文件 ， 
而 Firefox 则 无 法 播放 MP4 文件 ， 从 而 转 问 
它 能 播放 的 WebM 文件 ， 如 图 17.7.3 所 示 。 

( Firefox 正 致力 于 将 对 MP4 的 支持 添加 到 所 

有 版 本 ， 因 此 当 你 读 到 本 书 的 时 候 情 况 可 能 
有 所 改变 。) 














17.7.3 ”不 文 持 MP4 但 文 持 WebM 的 浏览 带 会 
加 载 paddle-steamer.webm 








| Download the video 


Internet | Protected liode: On 


a 








17.7.4 ”IE8 会 忽略 video 和 source 元素， 仅 显 
示 下 载 链 接 。 这 里 我 选择 链接 到 视频 的 MP4 版 本 

(参见 图 17.7.1 ) ,我 也 可 以 选择 WebM 版 本 ,或 
者 提供 两 个 版 本 的 链接 


既 不 识别 video 元 素 又 不 识别 source 元 
系 的 浏览 锅 〈 即 不 文 持 HTMLS 的 浏览 右 ) 在 
解析 文档 时 会 完全 忽略 这 些 标签 ， 它 只 会 显 
示 在 video 元 系 结束 标签 之 前 输入 的 文本 。 

表 17.7.1 列 出 了 source 元 素 的 属性 。 











表 17.7.1 source 的 属性 
名 利 摘 述 
srC 视频 来 源 的 URL 
type 用 于 指定 视频 的 类 型 ， 帮 助 浏览 需 决 定 它 是 否 能 播放 该 视频 。 如 图 17.7.1 所 示 ， 
该 属性 的 值 反 映 的 是 视频 的 格式 ， 即 编 解 码 震 ( 如 video/mp4、video/webm、 
video/ogg ) 
media 用 于 为 视频 来 源 指定 CSS3 媒体 查询 ， 从 而 可 以 为 具有 不 同 屏幕 尺寸 的 设备 指定 





不 同 的 《如 更 小 的 ) 视频 
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图 17.7.1 中 提供 的 备用 内 容 除 了 可 以 
放置 链接 ， 还 可 以 放置 视频 的 截图 或 其 他 内 
容 ， 例 如 ，<p>Sorry，your browser doesn't 
support HTML5 video.</p>， 然 后 再 提供 一 个 
链接 。 


可 以 在 www.biebuckbunny.org/index. 
php/download/ 找到 一 些 免 费 的 视频 ， 用 于 试 
验 video 和 source 元素。 该 网 站 没有 WebM 
格式 的 视频 ， 不 过 你 可 以 通过 17.2 忆 提 供 的 
工具 进行 格式 转换 。 


17.8 提供 可 访问 性 


利用 现代 浏览 硕 提 供 的 原生 可 访问 性 文 
持 ， 原 生 多 媒体 可 以 更 好 地 使 用 键盘 进行 控 
制 ， 这 是 原生 多 媒体 的 男 一 个 好 人 处 。 

HTML5 视频 和 音频 的 键盘 可 访问 性 文 
持 在 Firefox 、JInternet Explorer 和 Opera 中 表 
现 恨 好 。 不 过 对 于 Chrome 和 Safari1， 截 至 本 
书写 作 之 际 ， 实 现 键盘 可 访问 性 的 唯一 办 法 
是 日 制 播放 控件 。 为 此 ， 需 要 使 用 JavaScript 
Media API ( 这 也 是 HTMLS 的 一 部 分 ) ,不 
过 这 已 经 超出 了 本 和 曹 的 讨论 范围 。 

HTMLS5 还 指定 了 一 种 新 的 文件 格式 
WebVTT ( Web Video Text Track，Web 视频 文 
本 轨道 ) 用 于 包含 文本 字幕 、 标 题 、 摘 述 、 
篇 章 等 视频 内 容 。 关 于 WebVTT 和 字幕 的 进 
一 步 讨 论 已 经 超出 了 本 和 草 的 范围 , 不 过 更 多 信 
县 可 以 参见 www.iandevlin.com/blog/2011/05/ 
html5/webvtt-and-video-subtitles， 其 中 包括 为 
了 对 接 规范 修改 在 2012 年 进行 的 更 新 。 




















Ian Devlin 的 万 7TMZ5 Multimedia: 
Develop and Design (Peachpit Press，2011 ) 一 
书 中 有 专门 演示 如 何 创建 个 人 的 可 访问 控件 
集 和 使 用 WebVTT 的 章节 。 http://net.tutsplus. 
comy/tutorlals/htmj-csstechnlques/an-ln-depth- 


overview-of-htmlS-multimedia-and-accessibility/ 


摘录 了 本 书 部 分 章节 。 


Terrill Thompson 比较 了 不 同 浏览 器 对 
HTMLS 视频 可 访问 性 的 支持 情况 ， 见 http:// 
terrillthompson.com/blog/3606。 


WebVTT 规范 还 在 制订 之 中 ， 因 此 通 
过 它 设 置 标题 等 内 容 的 方法 未 来 有 可 能 会 变化 。 


17.9 ” 首 频 文件 格式 


学 会 了 使 用 HTML5 原生 媒体 在 网 页 中 
添加 视频 之 后 ， 下 面 看 看 如 何 次 加 音频 。 同 
HTML5 视频 一 样 ，HTML5 也 支持 大 量 不 同 
的 首 频 文件 格式 编 解 码 禹 ) 。 

口 Ogg Vorbis 使 用 的 文件 扩展 名 为 
.0gg， 文 持 它 的 浏览 希 包 括 Firefox 
3.5+、Chrome 5+ 和 Opera 10.5+。 

口 MP3 使 用 的 文件 扩展 名 为 .mp3， 文 
持 它 的 浏览 硕 包 括 Safari 5+、Chrome 
6+、Internet Explorer 9+ 和 iOS 。 

口 WAV 使 用 的 文件 扩展 名 为 .wav， 文 持 
它 的 浏览 器 包括 Firefox 3.6+、Safari 
5+、Chrome 8+ 和 Opera 10.5+。 

DAAC 使 用 的 文件 扩展 名 为 .aac， 文 
持 它 的 浏览 硕 包 括 Safari 3+、Internet 
Explorer 9+、iOS 3+ 和 Android 2+。 

口 MP4 使 用 的 文件 扩展 名 为 .mp4， 文 
持 它 的 浏览 问 包 括 Safari 3+、Chrome 
5S+、Internet Explorer 9+、iOS 3+ 和 
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Androld 2+。 
UD Opus 使 用 的 文件 扩展 名 是 .Opus。 这 
是 一 种 新 的 音频 文件 格式 ， 在 本 书写 
作 之 时 只 有 Firefox 文 持 。 
你 应 该 还 记得 ，MP4 是 一 种 视频 编 解码 
硕 ， 不 过 它 也 可 以 仪 对 首 频 数据 进行 编码 。 


对 于 视频 ， 需 要 使 用 两 种 不 同 的 文件 
a 确保 获得 所 有 兼容 HTMLS5 的 浏览 器 
的 支持 。 对 于 音频 ， 最 好 的 两 种 格式 是 Ogg 
Vorbis 和 MP3 。 


EB 在 17.2 节 的 补充 材料 “转换 文件 格式 ” 


中 提 到 的 Miro Video Converter 应 用 程序 也 可 
尺 用 来 转换 音频 。 


17.10 在 网 页 中 添加 市 控件 的 


AR 


让 我 们 来 实际 操作 一 下 回 网 页 中 添加 音 
频 文 件 。 过 程 跟 添加 视频 文件 非常 相似 ， 只 
不 过 是 使 用 audio 元 素 ， 参见 图 17.10.1。 当 
然 ， 同 视频 控件 一 样 ， 每 个 浏览 硕 都 有 处 理 
音频 控件 外 观 的 独特 方式 〈 人 参见 图 17.10.2 ~ 
图 17.10.6 ) 。 











<body> 


<audio src="piano.ogg" controls></audio> 
</body> 
</html> 


17.10.1 单个 Ogg 编码 的 音频 ( 包含 默认 控件 


集 ) 。 可 以 省 略 controls 属性 ， 但 因为 音频 文件 
不 可 见 ， 所 以 什么 都 不 会 显示 
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图 17.10.2 ”Firefox 中 的 音频 控件 。 跟 视频 控件 一 
样 ，Firefox( 和 IE10 ) 标记 的 音频 文件 要 比 其 他 





浏览 融 标 记 的 长 1 秒 





1:22 本 es 


17.10.3 Chrome 中 的 音频 控件 





17.10.4 ”IE10 中 的 音频 控件 


0:0071:22 | 





17.10.5 ”Opera 中 的 音频 控件 


图 17.10.6 ”Safari 中 的 音频 控件 


如 果 浏 览 器 不 支持 某 种 首 频 文件 格式 

浏览 器 面 对 不 支持 的 音频 格式 时 显示 的 
消息 并 不 一 致 。 例 如 ， 如 果 仅 指定 Ogg 文件 
(参见 图 17.10.1 ) ，IE10 会 显示 如 图 17.10.7 
所 示 的 消息 ， 而 Safari 则 会 显示 播放 控件 和 
Loading... 字样 。 图 17.10.4 和 图 17.10.6 显示 
了 它们 支持 菜 文 件 格式 (如 MP3 ) 时 显示 的 
播放 控件 的 样子 。 


© Error: Unsupported audio type or invalid file path 





17.10.7 IE10 不 支持 你 在 src 中 指定 的 首 频 文 
件 格式 的 情况 


尊重 版 权 


360 第 17 齐 ， 视频、 音频 和 其 他 多 媒体 


可 用 于 audio 元 系 的 属性 参见 表 17.10.1。 


表 17.10.1 


src( 源 ) 指定 音频 文件 的 URL 
autoplay(〈 自动 播放 ) 
controls ( 控件 ) 
muted ( 静音 ) 

loop (循环 ) 

preload ( 预 加载 ) 





让 音频 静音 
让 音频 循环 播放 


告诉 训 览 硕 要 加 载 的 音频 内 容 的 多 少 。 


音频 属性 


摘 ” 述 


当 音 频 可 以 播放 时 立即 开始 播放 
深 加 浏览 带 为 首 频 设置 的 默认 控件 





加以 是 以 下 三 个 值 : 


none 表示 不 加 载 任何 音频 ; metadata 表示 仅 加 载 音 频 的 元 数据 ( 如 长 度 ) ; auto 
表示 让 浏览 器 决定 怎样 做 (这 是 默认 的 设置 ) 


在 网 页 中 添加 市 控件 的 单个 音频 文件 的 
又 
口 获取 音频 文件 。 


口 输入 <audio src="my-audio.ext" controls> 


Nh 


</audio>， 其 中 的 my-audio.ext 是 音 


频 文件 的 位 置 、 名 称 和 扩展 名 。 
目 动 播 放 、 循 环 和 预 加 载 


这 一 节 介 绍 的 属性 与 video 对 应 的 属性 的 
原理 是 一 样 的 。 使 用 autoplay 属性 会 让 音频 
文件 在 页 面 加 载 时 就 自动 播放 (如 图 17.11.1 
和 图 17.11.2 所 示 ) 。 使 用 loop 属性 可 以 让 
音频 文件 循环 播放 ( 如 图 17.11.3 所 示 ) 。 
对 preload 属性 使 用 表 17.10.1 中 的 值 ， 可 
以 指定 浏览 硕 预 加 载 音 频 文 件 的 方式 〈 如 
图 17.11.4 所 示 ) 。 
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<body> 
<audio src="piano.ogg" autoplay 


controls></audio> 
</body> 
</html> 


图 17.11.1 当 页 面 加 载 时 会 目 动 播放 的 Ogg 音频 
文件 〈 含 默认 控件 集 ) 








17.11.2 加载 时 会 日 动 开始 播放 的 音频 文件 ( 含 
操 件 ) 


<body> 
<audio SITC= piano.0gg” loop controls> 
</audio> 
</body> 
</html> 





图 17.11.3 会 循环 播放 的 Ogg 音频 文件 ( 含 默 认 
控件 集 ) 


<body> 
<audio src="piano.ogg" preload= 


"metadata” controls></audio> 
</body> 
</html> 





17.11.4 ”页 面 加 载 时 ，Ogg 音频 文件 只 加 载 元 
数据 (如 长 度 ) 


1. 为 音频 文件 添加 控件 并 让 其 自动 播放 的 
又 


输入 <audio src="my-audio.ext" autoplay 


Nh 


controls></audio>， 这 里 的 WW-audio.ext 指 
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向 你 的 音频 文件 。 如 果 省 略 controls 属性 ， 
音频 文件 会 自动 播放 ， 但 不 会 显示 在 浏览 需 
页 面 上 。 


2. 让 音频 文件 循环 播放 的 步 又 


输 人 xaudio src="my-audio.ext" loop 





controls></audio>， 这 里 的 Wy-audio.ext 指 


回 你 的 音频 文件 。 


3. 让 浏览 器 仅 预 加 载 育 频 元 数据 

输 入 xaudio src="my-audio.ext" 
preload="metadata”controls></audio>， 这 
里 的 史 -audio.ext 指 回 你 的 音频 文件 。 


可 以 对 audio 元素 包 侈 autoplay、 
loop 和 preload 属性 的 任意 组 合 。 注 意 ， 包 
含 autoplay 属性 会 履 盖 preload 属性 的 设置 ， 
为 只 有 加 载 音频 文件 才能 播放 。 


17.6 节 介 绍 的 preload 属性 的 auto、 

none 和 metadata 值 的 用 法 说 明 同 样 适 用 于 
audio 元 素 。 (关于 如 何 确定 尺寸 的 内 容 并 不 
适用 于 audio。) 记 住 ，preload 属性 的 值 不 


会 影响 浏览 器 的 行为 ， 它 只 影响 请 求 。 


17.12 提供 市 备用 内 容 的 多 个 
视频 源 


为 了 获得 所 有 兼容 HTMLS 的 浏览 器 的 支 
持 ， 至 少 需要 为 音频 提供 两 种 格式 。 实 现 这 
一 目标 的 方法 同 video 元 素 也 是 一 样 的 ， 即 使 
用 source 元 系 。 备 用 方法 跟 audio 元 素 也 一 样 ， 
如 图 17.12.1 所 示 。 你 可 能 猿 到 了 ， 浏 览 右 会 
忽略 它 不 支持 的 音频 格式 ， 而 显示 它 支 持 的 
音频 格式 (参见 图 17.12.2 和 图 17.12.3 ) 。 不 
支持 audio 元 素 的 浏览 锅 显 示 备 用 内 容 ， 参 见 
图 17.12.4。 








17.12 提供 带 备 用 内 容 的 多 个 视频 源 361 


<body> 
<audio controls> 
《SOUICe src="piano.ogg" 
» type="audio/ogg"> 
《SOUICe src="piano.mp3" 
» type="audio/mp3"> 


<p>Your browser doesn't support 
>HTIML5 audio, but you can 
;<a href="piano.mp3">download the 
audio file</a> (MP3, 1.3 MB).</ 
p> 
</audio> 
</body> 
</html> 





17.12.1 这 个 audio 元 素 ( 含 默认 控件 集 ) 定 
义 了 两 个 音频 源 文件 ， 一 个 编码 为 Ogg， 男 一 个 为 
MP3。 完 整 的 过 程 同 指定 多 个 视频 源 文件 的 过 程 是 
一 样 的 。 浏 览 砷 会 忽略 它 不 能 播放 的 ， 仪 播放 它 能 
播放 的 





17.12.2 ”支持 Ogg 的 浏览 器 ( 如 Firefox ) 会 加 
载 piano.ogg。Chrome ( 这 里 并 未 显示 ) 同时 理解 
Ogg 和 MP3， 但 是 会 加 载 Ogg 文件 ， 因 为 在 audio 
元 素 的 代码 中 ，Ogg 文件 位 于 MP3 文件 之 前 





17.12.3 不 支持 Ogg 格式 ， 但 文 持 MP3 格式 
的 浏览 妖 ( 契 10 ) 会 加 载 piano.mp3 














| Your browser doesn't support HTMLS audio, but 
yoUu can download the audio file (MP3, 1.3 MBY. 





万 Internet | Protected Mode: On #4 v IME = 


= i 








17.12.4 旧 浏 览 器 (如 正 8 ) 会 显示 备用 信息 
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指定 两 种 不 同 的 音频 来 源 的 步骤 

(1) 获取 音频 文件 。 

(2) 输入 《audio controls> 开始 audio 元 
素 〈 含 默认 控件 集 ) 。 

(3) 输入 <source src="my-audio.ogg" type= 
"audio/ogg">， 这 里 的 my-audio.ogpg 是 Ogg Vorbis 
指 回 你 的 音频 文件 。 

(4) 输入 <source src="my-audio.mp3" type= 
"audio/mp3">， 这 里 的 WW-audio.mp3 指 问 你 
的 MP3 音频 文件 。 

(5) 可 选 步 又 〈 但 推 存 带 春 ) 。 对 于 不 文 
持 HIMLS 音频 元 素 的 浏览 絮 创 建 备用 内 容 或 
音频 下 载 链接 。 

(6) 输入 </audio> 结束 audio 元 系 。 








type 属性 

type 属性 可 以 帮助 浏览 器 判断 它 是 否 
能 播放 菜 个 文件 。 对 音频 文件 来 说 ， 其 值 
总 是 audio/ 加 上 格式 本 身 ， 包 括 audio/ 
ogg、audio/mp3、audio/aac、audio/wav 和 
audio/mp4。 


17.13 添加 具有 备用 Flash 的 视 


频 和 音频 


除了 可 以 提供 下 载 链 接 作 为 备用 方案 ， 
还 可 以 〈 或 许可 以 说 应 该 ) 区 入 一 个 能 播放 
MP4 视频 文件 的 Flash 备用 播放 需 。 是 的 ， 
尽管 HIML5 和 原生 多 媒体 非常 强大 ,但 为 了 
照顾 那些 无 法 处 理 这 些 技术 的 旧 浏 览 硕 〈 比 
如 IE9 之 前 的 版 本 ) ， 仙 怕 还 得 求助 于 舱 入 
Flash 内 容 的 方法 。 也 就 是 说 ， 如 果 和 希望 获得 
尽 可 能 多 的 用 户 ， 至 少 还 有 一 种 选择 ! 
我 会 使 用 John Dyer 的 MediaElement.js 
(http://mediaelementjs.com ) 演示 如 何 航 入 





Q) CMS 是 内 容 管理 系统 的 人 简称。 一 一 译 者 注 
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Flash。 这 并 不 是 唯一 的 解决 方案 ， 但 它 做 得 
不 错 ， 而 且 被 WordPress ( 一 个 广泛 使 用 的 博 
客 和 CMS" 软件 ) 这 样 的 系统 采用 了 。 我 在 
提示 里 面 还 列举 了 一 些 其 他 的 奉 代 方 案 。 
要 让 MediaElement.js 与 原生 视频 和 音频 
一 起 运行 ， 需 要 做 一 些 额 外 的 工作 。 首 先 ， 
需要 获取 MediaElement.js 文件 ， 将 它们 放 到 
网 站 文件 夹 里 (如 图 17.13.1 至 图 17.13.3 所 
示 ) 。 然 后 将 其 中 的 一 些 文件 放 到 网 页 里 〈 如 
图 17.13.4 和 图 17.13.5 所 示 ) 。 这 些 步 又 对 
视频 和 音频 来 说 都 是 必要 的 。 
然后 ， 你 就 可 以 在 页 面 中 插入 视频 
( 如 图 17.13.6 和 图 17.13.7 所 示 ) 和 音频 
( 如 图 17.13.8 和 图 17.13.9 所 示 ) 了 。 当 
MediaElement.js 由 图 17.13.6 和 图 17.13.8 中 
的 脚本 初始 化 以 后 ， 它 会 日 动 决定 让 浏览 带 
使 用 HTMLS5 原生 播放 系统 还 是 Flash 播放 天 。 




















17.13.1 随 着 MediaElement.js 的 升级 ，ZIP 文 
件 解压 后 的 文件 夹 的 名 称 可 能 与 这 里 不 一 样 





"™ I johndyer-mediaelement-2601db5 


» 国 demo 
b i media 


$9 README.md 
b src 
bE | test 





17.13.2 要 让 MediaElement.js 运行 在 你 的 网 站 
上 ， 只 需要 build 这 一 个 文件 夹 里 的 内 容 


1. 获取 MediaElement.js 文件 ， 并 将 文 
件 包 括 在 网 站 目录 中 

(1) 访问 http://mediaelementjs.com。 点 击 
Download Latest 按钮 ， 下 载 ZIP 包 。 


图 灵 社 区 会 员 wenshanjun 专 享 尊重 版 权 


17.13 





(2) 在 你 的 电脑 上 找到 下 载 下 来 的 ZIP 文 
件 。 该 文件 通常 位 于 Downloads 文件 夹 ( 除 
非 你 指定 了 别 的 存放 路 算 ) 。 解 压 该 文件 ( 通 
第 是 双击 ZIP 文件 名 ) ， 会 看 到 一 个 类 似 于 
图 17.13.1 中 所 示 的 文件 夹 。 

(3) 打开 文件 夹 ， 旺 现 出 子 文件 来。 复制 
build 文件 夹 (如 图 17.13.2 所 示 ) ， 再 粘贴 到 
网 站 文件 夹 ( 如 图 17.13.3 所 示 ) 。 








Las 


bp build 


辐 website 


| : | mI | 本 E> 


paddle-stearmer.mpd 
| paddle-steamer-webm 
国 piano.mp3 

了 piano.ogg 


17.13.3 将 build 文 件 夹 粘贴 到 网 站 的 文件 夹 
(你 可 能 使 用 的 是 其 他 的 文件 夹 名 称 ), 为 了 简单 ， 
我 将 build 直接 放 到 了 媒体 文件 所 在 的 目录 。 通 常 ， 
我 会 将 媒体 文件 统一 放 到 名 为 media 或 类 似 名 称 的 

文件 夹 里 


《!DOCTYPE html> 
<html Jang= en > 
<head> 
<meta charset="utf-8" /> 
<title>HTML5 Media with Fallback Flash 
» Player</title> 
<script src="build/jquery.js"> 
</script> 
<script src="build/mediaelement-and- 
player.min.js"></script> 
<link rel="stylesheet" href="build/ 
> mediaelementplayer.min.css" /> 
</head> 
<body> 


</body> 
</html> 





17.13.4 这 些 文件 包含 了 让 媒体 播放 融 得 以 工 
作 的 文件 ， 还 包括 了 统一 的 外 观 样式 文件 
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国 website 


| = Eg E24 





| 二 | exaimple,.html 
paddle-steamer.mpd 
| paddle-steamer.webm 
国 pianc.mp3 


[四 


_ | pianog.ogg 








17.13.5 ”现在 ， 有 了 build 文件 夹 、 你 的 网 页 
和 你 的 媒体 文件 


2. 为 网 页 添加 MediaElement.js 

页 面 需 要 加 载 一 全 特殊 的 文件 ， 无 论 是 
为 视频 还 是 为 音频 设置 备用 播放 途 。 

(1) 创建 一 个 新 的 HTML 页 面 ， 或 者 打开 
一 个 现 有 的 页 面 。 

(2) 将 图 17.13.4 中 突出 显示 的 代码 添加 
到 页 面 中 ， 从 而 让 页 面 加 载 必 要 的 样式 表 和 
JavaScript 文件 。 

(3) 将 页 面 保存 到 放置 build 文件 夹 的 目 
录 ( 如 图 17.13.5 所 示 ) 。 


3. 为 视频 添加 备用 Flash 的 步骤 

(1) 获取 视频 资源 。 

(2) 输入 video controls> 开始 video 元 
素 〈 含 默认 控件 集 ) 。 如 有 需要 ， 在 此 处 指 
定 width、height、poster 等 其 他 属性 。 

(3) 输入 <source src="my-video.mp4" type 
="type/mp4">， 这 里 的 WIqdeo.mp4 是 MP4 视 
频 源 文件 的 名 称 。 

(4) 输入 <source src="myVideo.webm"type 
="Video/webm">， 这 里 的 Wy-video.webm 是 WebM 
视频 源 文件 的 名 称 。 

(5) 如 有 需要 ， 为 不 文 持 HIMLS 视频 和 
Flash 的 浏览 各 提供 备用 信息 和 链接 。 
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(6) 输入 </video> 结束 video 元 素 。 

(7) 将 图 17.13.6 中 突出 显示 的 代 但 添加 
到 页 面 中 ， 从 而 初始 化 一 个 视频 播放 希 。 将 
script 放 到 </body> 的 剖面， 哪怕 页 面 拥有 
视频 以 外 的 其 他 内 容 。 

现在 ， 你 的 视频 拥有 了 尽 可 能 广泛 的 受 
众 ， 参 见 图 17.13.7。 


《!DOCTYPE html> 
<html lang="en'"> 
<head> 
<meta charset="utf-8" /> 
<title>HTML5 Media with Fallback Flash 
> Player</title> 
《SCITipt src="build/jquery.js"></script> 
<script src="build/mediaelement-and- 
» player.min.js"></script> 
<link rel="stylesheet” href="build/ 
» mediaelementplayer.min.css” /> 
</head> 
<body> 
<video width="369" height="208" 
» preload="metadata" controls> 
<source src="paddle-steamer.mp4" 
' type="video/mp4"> 
《SOUICe src="paddle-steamer.webm" 
type="video/webm"> 
<p>Your browser doesn't support HTML5 
» Video or Flash, but you can «a href= 
» "paddle-steamer.mp4">download the 
一 Videoc/a> (MP4, 2.4 MB).</p> 
</Video> 


<!-- 以 下 代码 要 放 在 所 有 内 容 下 面 --> 
<script> 
$('video').mediaelementplayer(); 
</script> 

</body> 

</html> 








17.13.6 这 段 视频 代码 看 起 来 很 束 悉 。 事 实 上 ， 

它 与 完 前 引用 多 个 来 源 的 代码 是 一 样 的 ,根据 需要 ， 

可 以 添加 其 他 的 属性 或 删除 一 部 分 属性 。 底 部 的 脚 
告诉 MediaElement.js 施展 它 的 魔法 
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17.13.7 ”无论 使 用 哪 种 浏览 器 ， 无 论 是 否 针 对 
不 支持 HIMLS 视频 的 浏览 大 使 用 Flash 版 本 ， 视 
频 的 播放 控件 看 起 来 都 是 一 样 的 








.页 面 顶端 跟 图 17.13.4 和 图 17.13.6 一 样 ... 


<body> 
<audio controls> 
<¢source src="piano.ogg" type="audio/ogg"> 
《SOUITCe src="piano.mp3" type="audio/mp3"> 
<p>Your browser doesn't Support HTML5 
”audio or Flash, but you can <a href:= 
» "piano.mp3">download the audio file 
» </a> (MP3, 1.3 MB).</p> 
</audio> 


<!-- 下 面 的 代码 放 在 所 有 内 容 之 后 --> 
<script> 
$('audio').mediaelementplayer(); 
</script> 

</body> 

</html> 





17.13.8 这 段 代码 与 图 17.13.6 中 代码 的 唯一 区 
别 就 是 这 里 指定 的 是 audio 而 非 video。audio 元 素 
看 起 来 也 相当 熟悉 





17.13.9 ” 同 视频 一 样 ， 无 论 在 哪个 浏览 带 ， 无 
论 是 否 使 用 Flash 版 本 ， 音 频 的 播放 控件 看 起 来 都 
是 一 样 的 
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<script> 
$('audio,video').mediaelementplayer(); 


</script> 
</body> 
</html> 





17.13.10 以 下 代码 会 初始 化 页 面 中 所 有 的 音 
频 和 视频 





4. 为 音频 添加 备用 Flash 的 步 又 

(1) 获取 音频 文件 。 

(2) 输入 audio controls> 开始 audio 元 
素 〈 含 默认 控件 集 ) 。 

(3) 输入 《souTce src="my-audio.ogg"type 
="audio/ogg">， 这 里 的 my-avdio.ogg 指 问 你 
的 Ogg Vorbis 音频 文件 。 

(4) 输入 <source src="my-audio.mp3"type 
="audio/mp3">， 这 里 的 Wy-audio.mp3 指 问 你 
的 MP3 音频 文件 。 

(5) 如 果 需 要 ， 为 不 文 持 HTMLS5 音频 或 
者 Flash 的 旧 浏 览 右 创建 信息 和 链接 。 

(6) 输入 </audio> 结束 audio 元 素 。 

0) 将 图 17.13.8 中 突出 显示 的 代码 添加 
到 页 面 中 去 ， 从 而 初始 化 音频 播放 釉 。 将 
script 放 到 </body> 的 前 面 ， 哪 介 页 面 拥 有 
音频 以 外 的 其 他 内 容 。 

现在 ， 你 的 音频 拥有 了 尽 可 能 广泛 的 受 
众 ， 参 见 图 17.13.9。 一 天 便 有 了 两 个 成 就 ! 


如 果 页 面 同 时 包含 了 视频 和 音频 ， 那 
么 需要 修改 页 面 询问 的 脚本 ， 如 图 17.13.10 
所 示 。 





人 
audio 和 source 元 素 ， 直 接 使 用 备用 Flash 播 
放 器 。 只 要 用 户 安 装 了 Flash， 就 能 播放 视频 
或 音频 内 容 。 


Internet Explorer 8 等 浏览 器 会 忽略 
公 
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如 果 没 有 为 视频 指定 preload= 
"metadata" ( 就 像 图 17.13.6 所 示 的 那样 ) ， 
也 没有 指定 海报 图 像 ， 那 么 视频 的 Flash 版 本 
会 显示 一 个 黑色 的 短 形 而 不 是 视频 的 一 帧 。 
不 过 ， 当 视频 开始 播放 时 ， 黑 色 的 矩形 就 会 
被 视频 本 身 替 代 。 


如 果 在 video 开始 标签 中 指定 了 
width 和 height， 那 么 视频 的 Flash 版 本 就 有 
可 能 显示 黑 边 。 不 过 ， 如 果 不 指定 尺寸 ， 视 
频 会 在 一 开始 呈现 一 个 比 正常 尺寸 要 大 的 区 
域 ， 然 后 再 缩小 到 正常 的 大 小 。 


其 他 的 Flash 播 放 解 决 方案 包括 
Video.js( www.videojs.com ) 、 JW Player( Www. 
longtailvideo.com/jw-player/ ) 、Flowplayer 

(http://flowplayer.org ) ”等 。JW Player 和 
Flowplayer 的 免费 版 本 会 在 媒体 播放 器 上 显示 
它们 的 标识 。 


当 Flash 播放 器 不 起 作用 时 

由 于 Flash 的 安全 设置 ， 当 你 在 自己 的 
电脑 上 测试 Flash 播放 器 ( 即 所 有 的 文件 都 
位 于 自己 的 电脑 上 , 而 不 是 在 服务 器 上 ) 时 ， 
有 可 能 无 法 播放 媒体 文件 。 

一 种 解决 办 法 是 将 你 的 MP3 和 MP4 
文件 上 传 到 Web 服务 器 ， 并 在 HTML 中 使 
用 绝对 路 径 引 用 它们 。 

例如 ， 将 图 17.13.6 中 的 文件 上 传 到 服 
务 器 的 media 文件 夹 中 。 可 以 将 第 一 个 src 
值 修改 如 下 (将 Www.yourdomain.com 替换 
为 真实 域名 ) : 
<source src="http://www.yourdomain.com/ 


media/paddle-steamer.mp4" type="video/ 
mp4"> 
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然后 保存 HTML 页 面 ， 再 在 你 的 电脑 
上 测试 (HTML 页 面 不 必 位 于 服务 器 上 ) 。 
你 还 可 以 修改 Flash 安全 设置 ， 允 许 本 地 
目录 播放 Flash。 参 见 http://mediaelementjs. 
com/#1installation 。 

如 果 还 是 有 问题 ， 参 见 17.2 节 的 补充 
材料 “设置 MIME 类 型 ”。 


17.14 ”高 级 多 媒体 


使 用 HTML5 原生 多 媒体 的 男 一 个 好 处 是 
可 以 利用 很 多 来 自 HTML5 或 与 HTML5 相关 
的 新 特性 和 新 功能 。 本 节 主 要 讨论 其 中 的 两 
个 : canvas 元 素 和 SVG。 





1. 通过 canvas 操作 视频 

使 用 canvas 元 素 及 相应 的 JavaScript API 
可 以 在 网 页 上 描 制 并 创建 动画 。 

可 以 对 HTML5 视频 应 用 这 些 API， 因 为 
video 元 素 可 以 同 其 他 HTML 元 素 一 样 进行 
处 理 ， 因 此 它 也 可 以 被 canvas 访问 和 获取 。 

通过 JavaScript API， 可 以 从 播放 的 视频 
中 抓 取 图 像 ， 并 在 canvas 元 系 中 重新 绘制 该 
图 像 ， 从 而 创建 视频 的 截图 。 

通过 API 可 以 对 单个 图 像 像 素 进 行 操 作 ， 
同时 由 于 可 以 根据 视频 在 canvas 中 创建 图 像 ， 
因而 可 以 调整 视频 的 像素 。 例 如 ， 可 以 将 视 
频 转 化 为 灰 度 模式 。 

这 只 是 让 你 对 通过 canvas 操作 video 元 
系 建 立 一 些 简单 的 概念 ， 对 这 一 主题 的 深 人 
探讨 已 经 超出 了 本 书 的 范围 。 


2. 联合 使 用 SVG 和 视频 
人 们 开始 关注 的 为 一 项 与 HTML5 有 关 的 





音频 和 其 他 多 媒体 


技术 是 SVG ( Scalable Vector Graphic， 可 缩 
放 矢 量 图 形 ) 。 

SVG 已 经 存在 相当 一 段 时 间 了 【( 它 诞 生 
自 1999 年 ) , 但 直到 HTMLS 才 有 了 svg 元 素 。 
通过 该 元 素 可 以 在 网 页 本 身 艇 人 SVG 定义 。 

SVG 使 用 XML 定义 图 形 和 图 像 ， 浏 览 
器 则 对 其 进行 解释 和 使 用 ， 从 而 描绘 出 真正 
的 图 形 。SVG 定义 所 包含 的 全 部 内 容 就 是 对 
如 何 绘制 和 绘制 什么 的 说 明 。 

使 用 SVG 创建 的 图 像 也 是 基于 矢量 而 不 
是 基于 光栅 的 。 这 意味 着 它们 可 以 很 好 地 适 
应 缩放 ， 因 为 浏览 器 只 是 简单 地 依照 绘制 说 
明 ， 根 据 所 需 的 尺寸 ， 将 图 形 绘制 出 来 。 相 
较 而 言 ，GIF、PNG 和 JPEG 文件 等 光栅 光栅 
图 像 包 含 的 是 像 双 数据 ， 如 果 要 以 远大 于 原 
始 图 像 的 尺寸 重新 绘制 图 像 ， 就 会 因为 缺少 
足够 的 像素 数据 导致 图 像 质量 受 损 。 

关于 SVG 的 完整 讨论 超出 了 本 章 的 范围 ， 
这 里 只 是 想 让 你 知道 视频 可 以 同 SVG 定义 联 
合 使 用 。 通 过 SVG 创建 的 图 形 可 以 用 于 对 视 
频 进行 庶 时 ,也 即 只 显示 能 透 过 该 图 形 ( 如 
圆圈 ) 的 底层 视频 。 还 可 以 创建 可 调整 为 任 
意 大 小 的 日 定义 视频 控件 。 

此 外 ， 还 有 一 些 SVG 滤 镜 可 以 应 用 于 
HTMLS 视频 ， 如 黑白 转换 、 高 斯 模糊 、 色 彩 
饱和 度 等 。 








17.15 更 多 资源 

本 章 仅 涵盖 了 HTMLS 多 媒体 的 基础 知 
识 。 关 于 这 一 主题 , 还 有 很 多 值得 学 习 的 东西 。 
这 里 有 大 量 有 关 资 源 供 你 研究 。 
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1. 在 线 资源 2. 图 书 

D “Video on the Web” 口 Ian Devlin 所 车 的 HTML5S Multimedia: 
(http://diveinto.htmlSdoctor.com/video. Develop and Design ( Peachpit Press, 
html ) 2011 ) ， 参 见 http://html5multimedia.com 

DD “WebVTT and Video Subtitles” 口 Shelley Powers 所 车 的 HTML5S Media 
(www.iandevlin.com/blog/2011/05/ ( O’Reilly Media，2011 ) 
html5/webvtt-and-video-subtitles ) 口 Silvia Pfeiffer 所 著 的 The Definitive 

DD “HTMLS Canvas: The Basics” Guide to HTMLS Video ( Apress, 2010) 


(http://dev.opera.com/articles/view/ 
html-5-canvas-the-basics ) 

口 “Learning SVG 
(http://my.opera.com/tagawa/blog/ 


learning-sveg ) 
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表格 


本 章 内 容 
D 结构 化 表格 
口 让 单元 格 路 越 多 列 或 多 行 


在 日 常生 活 中 ， 我 们 对 表格 式 数 据 已 经 
很 用 悉 了 。 这 种 数据 有 多 种 形式 , 如 财务 数据 、 
调查 数据 、 事 件 日 历 、 公 交 和 车 时 刻 表 、 电 视 
节目 表 等 。 在 大 多 数 情况 下 ， 这 类 信息 都 由 
列 标题 或 行 标题 加 上 数据 本 号 构成 。 

本 半 将 对 table 元 系 及 其 子 元 系 进 行 讲 
解 ， 重 点 是 基本 的 table 结构 和 样式 。HTML 
表格 可 以 很 复兴， 不 过 很 少 需 要 实现 特别 复 
杂 的 表格 〈 除 非 是 具有 丰 蜗 数据 的 网 站 ) 。 
对 于 一 些 比较 复杂 的 示例 ， 参 见 以 下 URL。 

口 Rosger Johansson 的 “Bring On the 
Tables 

(www.456bereastreet.com/archive/200410/ 
bring_on_the_tables/ ) 

口 Rosger Hudson 的 “Accessible Data 
Tables 
(www.usability.com.au/resources/tables.cfm ) 

口 Stephen Fers 的 “Techniques for Accessible 
HTML Tables 

(http://accessiblehtml.sourceforge.net/ ) 


18.1 结构 化 表格 
放 在 电子 表格 中 的 信息 通常 


























很 适合 用 


HTML 表格 呈现 。 

从 基本 层面 看 , table 元 系 是 由 行 组 成 的 ， 
行 又 是 由 单元 格 组 成 的 。 每 个 行 (tr ) 都 包 
含 标题 单元 格 (th ) 或 数据 单元 格 (td) ， 
或 者 同时 包含 这 两 种 单元 格 。 如 果 认 为 为 整 
个 表格 添加 一 个 标题 有 助 于 访问 者 理解 该 表 
格 ， 可 以 提供 caption。 在 浏览 器 中 ， 标 题 通 
党 显示 在 表格 上 方 ， 其 用 途 显而易见 。 此 外 ， 
scope 属性 (也 是 可 选 的 ， 不 过 推荐 使 用 ) 可 
以 告诉 屏幕 阅 谈 锅 和 其 他 辅助 设备 当前 的 th 
是 列 的 标题 单元 格 〈 使 用 scope="col" ) 还 是 
行 的 标题 单元 格 ( 使 用 scope="row"” ) ， 抑 或 
是 用 于 其 他 目的 的 单元 格 (参见 最 后 一 条 提 
示 ) 。 表 格 元 素 的 茜 本 实现 代码 如 图 18.1.1 
所 示 。 

在 默认 人 情况 下 ， 表 格 在 浏览 郁 中 呈现 的 
宽度 是 其 中 的 信息 在 页 面 可 用 空间 里 所 需要 
的 最 小 宽度 ， 如 图 18.1.2 所 示 。 很 容易 就 会 
想到 可 以 通过 CSS 改变 表格 的 格式 ， 后 面 很 
快 就 会 讲 到 。 

不 过 ， 图 18.1.1 中 的 表格 似乎 缺少 一 
些 东 西 。 如 何 知道 每 行 数据 表示 的 是 什么 
呢 ? 如果 每 个 行 也 有 标题 单元 格 ， 就 很 容 多 
理解 了 。 添 加 这 些 单元 格 只 需要 在 每 行 开头 
添加 一 个 th 元素 就 可 以 了 。 列 标题 应 设置 
scope="col" ， 而 每 个 行 的 th (位 于 td 之 前 ) 
则 应 设置 scope="row"， 如 图 18.1.3 所 示 。 
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<body> 


<table> 
<caption>Quarterly Financials for 
1962-1964 (in Thousands)</caption> 
<tr> 
<th scope="col">1962</th> 
<th scope="col">1963</th> 
<th scope="col">1964</th> 
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<body> 


<table> 
<caption>Quarterly Financials for 
1962-1964 (in Thousands)</caption> 
<thead> 《!-- 表格 头 部 --> 
<tr> 
<th scope="col">Quarter</th> 
<th scope="col">1962</th> 











</tr> <th scope="col">1963</th> 
<tr> <th scope="col">1964</th> 
<td>$145</td> </tr> 
<td>$167</td> </thead> 
<td>$161</td> <tbody> 《!-- 表格 主体 --> 
</tr> <tr> 
<tr> <th scope="row">01</th> 
<td>$140</td> <td>$145</td> 
<td>$159</td> <td>$167</td> 
<td>$164</td> <td>$161</td> 
</tr> </tT> 
<tr> <tr> 
<td>$153</td> <th scope="row">02</th> 
<td>$162</td> <td>$140</td> 
<td>$168</td> <td>$159</td> 
</tr> <td>$164</td> 
<tr> </tr> 
<td>$157</td> . [03 and 04 rows| ... 
<td>$160</td> </tbody> 
<td>$171</td> <tfoot> 《!-- 表格 尾部 --> 
</tr> <tr> 
</table> <th scope="row">TOTAL</th> 
<td>$595</td> 
</body> <td>$648</td> 
</html> <td>$664</td> 
</tr> 
18.1.1 每 个 行 都 是 由 tr 元 素 标记 的 。 这 是 个 </tfoot> 
很 简单 的 表格 ， 它 只 有 一 个 包含 标题 单元 格 (th 
元 素 ) 的 行 和 三 个 包含 数据 单元 格 ( td 元 素 ) 的 行 。 ee 
本 例 中 也 包含 了 caption 元 素 ， 不 过 它 是 可 选 的 ， ye 


参见 第 一 条 提示 

18.1.3 通过 指定 thead、tbody 和 tfoot 显 式 

SH Abasceoe 地 定义 了 表格 的 不 同 部 分 。 接 着 ， 在 每 行 的 开头 

河 Abasictble 添加 了 th 元 素 。tbody 和 tfoot 中 的 th 设置 了 

scope="row"， 表 明 它 们 是 行 标题 。 表 格 在 浏览 器 
人 恒 18.1.2 在 默认 情 i 
1962-1964 (in 下。 中 的 显示 效果 如 图 18.1.4 所 示 

Thousands) 况 下 ， th Be 本 是 LY 








1962 1963 1964 


$145 $167 $161 粗 体 显示 的 ,th 和 





$140 $159 $164 caption 文本 都 是 居中 
py 对 齐 的 ， 表 格 的 宽度 


$157 $160 $171 a ee 
就 是 内 容 所 需 的 宽度 
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生姜 全 Basic table evolved 
疆 Basic table evolved 
Quarterly Financials for 
1962-1964 
tin Thousands) 


Quarter 1962 1963 1964 
Ql $145$167$161 
Q2 $140$159 $164 
OQ3 $153$162$168 
Q4 $157$160$171 

TOTAL $595 $648 $664 





18.1.4 ”这 个 表 既 有 列 标 题 ， 也 有 行 标 题 。 由 于 
添加 了 新 列 ， 表 格 变 宽 了 ， 因 此 整个 表格 的 标题 也 
比 图 18.1.2 中 的 更 宽 一 些 


图 18.1.3 中 还 特意 引入 了 其 他 一 些 专门 
用 于 定义 表格 的 元 素 ， 即 thead、tbody 和 
tfoot。thead 元 系 可 以 显 式 地 将 一 行 或 多 行 
标题 标记 为 表格 的 头 部 。tbody 元 素 用 于 包围 
所 有 的 数据 行 。tfoot 元 素 可 以 显 式 地 将 一 行 
或 多 行 标 记 为 表格 的 尾部 。 可 以 使 用 tfoot 
包围 对 列 的 计算 值 ( 就 像 图 18.1.3 中 所 示 的 
那样 ) ， 也 可 以 在 长 表格 ( 如 列车 时 刻 表 ) 
中 使 用 tfoot 重复 thead 中 的 内 容 ( 如 采 表 
格 在 打印 时 超过 一 页 ， 有 的 浏览 融会 在 每 
一 页 都 打印 tfoot 和 thead 元 素 的 内 容 ) 。 
thead 、tfoot 和 tbody 元 素 不 会 影响 表 格 的 
布局 ， 也 不 是 必需 的 〈 不 过 推荐 使 用 它们 ) 。 
如 采 包 含 了 thead 或 tfoot， 则 必须 同时 包含 
tbody。 些 外， 还 可 以 对 它们 添加 样式 。 


创建 表格 结构 的 步骤 

(1) 输入 <table>。 

(2) 如 果 需 要 ， 输 入 xcaption>caption 
contentx</caption>， 其 中 的 caption content 
是 对 表格 的 描述 。 

(3) 如 果 需 要， 在 要 创建 的 表格 部 分 的 
第 一 个 tr 元素 之 前 ， 输 入 <thead>、<tbody> 
或 <tfoot> ( 需要 说 明 的 是 ，<tbody> 不 能 在 














<thead> 之 前 ) 。 

(4) 输入 <tr> 定义 行 的 开始 。 

(5) 输入 <th scope="scopetype"> 开始 标 
题 单元 格 ( 其 中 的 scopetype 可 以 是 col、 
row、cColgroup 或 rowgroup ) ， 或 者 输入 <td> 
定义 数据 单元 格 的 开始 。 





(6) 输入 单元 格 的 内 容 。 

(7) 输入 </th> 结束 标题 单元 格 ， 或 者 输 
和 人 《</td> 结束 数据 单元 格 。 

(8) 对 行内 的 每 个 单元 格 重 复 第 (5) 步 至 
第 (7) 步 。 

(9) 输入 </tr> 结束 行 。 

(10) 为 所 在 表格 部 分 内 的 每 个 行 重复 第 
(4) 步 至 第 (9) 步 。 


(11) 如 果 在 第 (3) 步 中 开始 了 一 个 表格 部 
分 ， 就 根据 需要 使 用 </thead> 、《/tbodyy> 或 
</tfoot> 结束 这 个 部 分 。 

(12) 为 每 个 表格 部 分 重复 第 (3) 步 至 
第 (11) 步 。 注 意 ， 一 个 表格 只 能 有 一 个 thead 
和 tfoot ， 但 可 以 有 多 个 tbody 元 率 。 

(13) 输入 </table> 以 结束 表格 。 

如 图 18.1.4 所 示 ， 在 默认 情况 下 ， 表 格 
被 压 得 很 己 。 通 过 应 用 一 些 CSS ( 如 图 18.1.5 
所 示 ) ， 可 以 为 单元 格 添加 一 些 空间 让 它们 
扩大 一 些 (使 用 padding ) ， 添 加 边框 以 指示 
单元 格 的 边界 (使 用 border ) ， 还 可 以 对 文 
本 进行 格式 化 。 这 些 样式 都 有 助 于 更 好 地 理 
解 表 格 ， 如 图 18.1.6 所 示 。 


如 果 包 念 了 caption 元 素 ， 那 么 它 必 
须 是 table 中 的 第 一 个 元 素 , 如 图 18.1.1 所 示 。 
(caption 元 素 可 以 包含 P 和 其 他 文本 元 素 。) 





如 果 包 含 了 thead 或 tfoot， 则 必须 
包含 tbody。tbody 不 能 位 于 thead 之 前 。 一 
个 table 只 能 拥有 一 个 thead 和 一 个 tfoot， 
但 可 以 有 多 个 tbody 元 素 。 
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body { 
font: 100% "Courier New", Courier, 
» Monospace; 


} 


table { 
border-collapse: collapse; 
} 


caption { 
font-size: .8125em; 
font-weight: bold; 
margin-bottom: .5em; 


} 


th， 

td { 
font-size: .875em; 
padding: .5em .75em; 


td 1 
border: 1px solid #000; 
} 


tfoot { 
font-style: italic; 
font-weight: bold; 





图 18.1.5 这 个 简单 的 样式 表 为 每 个 数据 单元 格 
添加 了 border ， 为 标题 单元 格 和 数据 单元 格 都 添 
加 了 padding， 还 对 表格 caption 和 内 容 进 行 了 
格式 化 。 如 果 不 对 table 定义 border-collapse: 
collapsej， 每 个 td 的 边框 和 相 邻 td 的 边框 之 间 
就 会 出 现 一 些 空 际 (默认 从 为 border-collapse: 
separate; ) 。 还 可 以 像 18.2 市 所 示 的 那样 ， 对 th 
元 素 应 用 边框 


合 9 © Basictable evolved and styled 四 





: : Basic table evolved and styled 18.1.6 现在 ) 
rter inancials for 示 是 页 
I 表 桥 阮 有 列 标 古 ， 
(in Thousands) 也 有 行 标题 ， 还 有 
Quarter 1962 1963 1964 一 个 显示 各 列 数 据 


之 和 的 行 ( 位 于 
tfoot 元 素 中 ) 。 


Ql1 $167 | $161 


= 

= ee 

04 到 为 你 计算 这 些 东 
西 的 数量 ， 因 此 确 
保 行列 数 都 正确 
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如 果 table 是 髓 套 在 figure 元素 内 
除 figcaption 以 外 的 唯一 元 素 ， 则 可 以 省 略 
caption， 使 用 figcaption 对 表格 进行 描述 
(参见 4.4 节 ) 。 注 意 ， 不 要 在 table 中 误 套 
figcaption， 而 应 跟 往 常 一 样 将 figcaption 
放 在 figure 中 。 


6 还 可 以 在 样式 表 中 对 table、td 或 th 
元 素 设置 background、width 等 属性 ， 尽 管 没 
有 在 CSS 示例 中 进行 演示 , 如 图 18.1.4 所 示 。 
总 之 ， 大 多 数 用 于 其 他 HTML 元 素 的 文本 格 
式 和 其 他 格式 也 可 以 应 用 于 表格 (参见 18.2 
节 的 另 一 个 例子 ) 。 你 可 能 会 发 现 ， 不 同 的 
浏览 器 显示 的 样式 稍 有 差异 ， 尤 其 是 Internet 


Explorer。 


可 以 通过 scope 属性 指定 th 为 一 组 
列 的 标题 (使 用 scope="colgroup" ) ,或 者 为 
一 组 行 的 标题 (使 用 scope="rowgroup" ) 。 对 
于 后 者 ， 参 见 下 一 节 的 示例 。 


18.2 让 蛙 元 格 跨越 多 列 下 多 行 


可 以 通过 colspan 和 Iowspan 属性 让 th 
或 td 跨越 一 个 以 上 的 列 或 行 。 对 该 属性 指 
定 的 数值 表示 的 是 跨越 的 单元 格 的 数量 ， 如 
图 18,.2.1 和 图 18.2.2 所 不 。 


1. 让 单元 格 跨越 两 个 或 两 个 以 上 列 的 步骤 
( 在 需要 定义 跨越 一 个 以 上 的 列 的 单元 
格 的 地 方 ， 如 果 为 标题 单元 格 ， 输 入 <th 后 
加 一 个 空格 ， 否 则 输入 <td 后 加 一 个 空格 。 
(2) 输入 colspan="n">， 这 里 的 n 是 单元 
格 要 跨越 的 列 数 。 
(3) 输入 单元 格 的 内 容 。 
(4) 根据 前 面 的 内 容 ,输入 </thy 或 者 cltd>。 
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(5) 根据 18.1 节 中 的 介绍 ， 完 成 表格 的 其 
余部 分 。 如 果 创 建 了 一 个 跨越 两 列 的 单元 格 ， 
在 该 行 就 应 该 少 定 义 一 个 单元 格 ; 如 果 创 建 
了 一 个 跨越 三 列 的 单元 格 ， 在 该 行 就 应 该 少 
定义 两 个 单元 格 ， 以 此 类 推 。 





<body> 


<table> 
<caption>TV Schedule</caption> 
<thead> 《!-- 表格 头 部 --> 
<tr> 
<th scope="rowgroup">Time</th> 
<th scope="col">Mon</th> 
<th scope="col">Tue</th> 
<th scope="col">Wed</th> 
</tr> 
</thead> 
<tbody> 《!-- 表格 主体 --> 
<tr> 
<th Scope= Tow >8 pm</th> 
<td>Staring Contest</td> 
<td colspan="2">Celebrity 
» Hoedown</td> 
/try 
<tr> 
<th scope="row">9 pm</th> 
<td>Hardy,，Har,，Har</td> 
<td>What's for Lunch?</td> 
<td rowspan="2">Screamfest Movie 
» of the Weak</td> 
</tr> 
<tr> 
<th scope="row">10 pm</th> 
<td>Healers, Wheelers &amp; 
» Dealers</td> 
<td>It's a Crime</td> 
</tr> 
</tbody> 
</table> 


</body> 
</htm]> 





图 18.2.1 通过 在 包含 Celebrity Hoedown 演出 的 
td 上 应 用 colspan="2"， 指 示 该 演出 的 上 映 时 间 包 
含 周 二 和 周三 晚上 8 点 这 两 个 时 间 。3 类 似 地 ， 在 
包含 Screamfest Movie of the Weak 的 td 上 添加 了 
rowspan="2"， 因 为 该 演出 持续 两 个 小 时 。 同 时 ， 
注意 Time 这 个 th 设置 了 scope="rowgroup"， 因 为 
它 是 它 正 下 方 的 每 个 行 标题 组 的 标题 
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@e0 Table with.colspan and rowspan 





1 ) Table with colspan and rowspan 


LP 





TUE 


Staring Contest coebiyHoedomn 


sa Hardy, Har Har What's for Lunch? 
Screamfest Movie 


18.2.2 ”仅仅 通过 查看 代码 ， 很 难 判断 colspan 
和 rowspan 对 表格 的 有 影响， 但 在 浏览 大 中 查看 就 
清楚 多 了 。 这 个 表格 还 用 CSS 添加 了 一 些 样 式 ， 

完整 的 样式 表 见 本 书 的 配套 网 站 www.htmlcssvqs. 
com/8ed/18 





2. 让 单元 格 跨越 两 个 或 两 个 以 上 行 的 步骤 

(1) 在 需要 定义 跨越 一 个 以 上 的 行 的 单元 
格 的 地 方 ， 如 果 为 标题 单元 格 ， 输 入 <th 后 
加 一 个 空格 ， 和 否则 输入 “td 后 加 一 个 空格 。 

(2) 输入 rowspan="n">， 这 里 的 n 是 单元 
格 要 跨越 的 行 数 。 

(3) 输入 单元 格 的 内 容 。 

(4) 根据 前 面 的 内 容 ， - </th> 或 者 </td>。 

(5) 根据 18.1 节 中 的 介绍 ， 完 成 表格 的 其 
余部 分 。 如 果 创建 了 一 个 ro rowspan 等 于 2 的 单 
元 格 ， 就 不 需要 定义 下 一 行 中 该 单元 格 对 应 
的 单元 格 了 ; 如 果 创 建 了 一 个 rowspan 等 于 3 
的 单元 格 ， 就 不 需要 定义 下 面 两 行 中 该 单元 
格 对 应 的 单元 格 了 ， 以 此 类 推 。 


表格 中 的 每 一 行 都 应 具有 相同 的 单元 
格 数量 。 跨 越 多 列 的 单元 格 应 算 做 多 个 单元 
格 ， 它 的 colspan 属性 值 为 多 少 ， 就 算 做 多 少 
个 单元 格 。 














表格 中 的 每 一 列 都 应 具有 相同 的 单元 
格 数量 。 跨 越 多 行 的 单元 格 应 算 做 多 个 单元 
格 ， 它 的 rowspan 属性 值 为 多 少 ， 就 算 做 多 少 
个 单元 格 。 
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本 章 内 容 

口 加 载 外 部 脚本 
D 诬 加 通 入 脚本 
口 JavaScript 事件 


HTML 定义 网 页 的 内 容 ，CSS 定义 网 页 
的 表现 ，JavaScript 则 定义 特殊 的 行为 。 建 立 
网 站 不 可 能 脱离 HTML ( 如果 要 让 网 站 看 起 
来 很 吸引 人 ， 则 离 不 开 CSS ) ， 但 JavaScript 
并 不 是 必需 的 。 在 大 多 数 情 况 下 ，JavaScript 
的 特性 都 是 用 于 增强 访问 者 体验 的 一 一 它们 
在 由 HTML 和 CSS 构建 的 核心 体验 的 基础 上 
进行 增强 。( 参见 本 书 前 言 部 分 “渐进 增强 : 
一 种 最 佳 实践 ” ) 。 

通过 编写 简单 的 JavaScript 程序 ， 可 以 显 
示 和 隐藏 内 容 ; 通过 编写 复杂 一 些 的 程序 ， 
可 以 加 载 数 据 并 动态 地 更 新 页 面 。 可 以 操作 
定制 的 HIML5 audio 和 video 元 素 控件 ， 使 
用 HIMLS 的 canvas 元 素 创 建 游戏 。 可 以 利 
用 地 理 定位 ， 根 据 访 问 者 所 在 的 位 置 定制 其 
体验 ; 可 以 让 访问 者 通过 将 文件 拖 放 到 浏览 
伪 和 窗口 进 行 上 传 ( Dropbox 的 网 站 就 是 一 个 这 
样 做 的 例子 ) 。 可 以 利用 JavaScript 和 一 些 踢 
大 的 HTML5 特性 及 相关 技术 构建 成 熟 的 Web 
应 用 程序 ( 这 些 内 容 痢 是 高 级 特性 ， 因 此 不 
在 本 书 讲解 范围 之 内 ) 。 

如 你 所 见 ，JavaScript 的 功能 非常 强大 ， 


























而 它 的 使 用 也 呈现 了 爆炸 式 的 增长 。jQuery 
(jquery.com ) 等 JavaScript 库 确 保 了 为 页 面 
沪 加 简单 交互 和 复杂 行为 的 过 程 变 得 容易 了 
许多 。 还 有 很 多 跟 jQuery 功能 类 似 的 库 ， 但 
在 这 些 库 中 ，jQuery 是 用 得 最 多 的 一 个 ， 这 
主要 是 因为 初学 者 很 容易 上 手 ， 同 时 它 有 很 
好 的 在 线 文 档 和 大 型 社区 文 持 。 除 了 jQuery 
以 外 ， 还 有 各 式 各 样 的 JavaScript 可 用 于 帮 
你 构建 大 型 Web 应 用 。 使 用 Node.js (http:// 
nodejs.org ) 甚至 可 以 用 JavaScript 构建 Web 
服务 大 。 

浏览 硕 广 商人 花费 了 大 量 的 精力 确保 其 浏 
览 硕 处 理 JavaScript 的 速度 较 几 年 前 的 版 本 有 
了 显著 提升 。JavaScript 也 可 以 在 平板 电脑 和 
现代 移动 浏览 硕 中 运行 ， 不 过 出 于 性 能 方面 
的 原因 ， 可 能 需要 为 这 些 设备 考虑 在 页 面 中 
加 载 的 脚本 的 大 小 。 

不 过 JavaScript 本 里 是 一 个 独立 、 庞 大 
的 主题 ， 因 此 我 们 不 会 在 本 书 讲解 这 门 语 
言 。 我 仍 会 解释 如 何 将 创建 好 的 脚本 插入 到 
HTML 文档 中 去 ， 同 时 给 出 一 些 关 于 如 何在 
插入 脚本 时 尽量 降低 其 对 页 面 影响 的 建议 ， 
此 外 还 会 提供 对 事件 处 理 程序 的 概览 。 

当 你 熟悉 HTML 和 CSS 后 ， 我 建议 你 
开始 和 学习 JavaScript ( 以 及 jQuery ) 。Marijn 
Haverbeke 的 Eloqguent JavaScript( 中 文 版 

《JavaScript 编程 精 解 》， 机 械 工业 出 版 社 ， 
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2012) 是 开始 学 习 JavaScript 的 好 资料 。 

该 书 的 原始 版 本 是 免费 的 ， 位 于 http:// 
eloquentjavascript.net， 此 外 还 有 修订 后 的 
纸 质 版 。 当 你 对 JavaScript 语言 有 一 定 了 解 
后 ， 可 以 看 看 Ivo Wetzel 和 Zhang Yi Jiang 的 
JavaScript Garden (http://bonsaiden.github.io/ 


JavaScript-Garden/ ) ， 这 是 个 和 学习 JavaScript 


语言 精华 和 怪异 特性 的 免费 、 简 清 的 资源 。 

JavaScript 要 比 HTML 和 CSS 更 复杂 一 
些 ， 因 此 ， 如 果 你 发 现 自己 要 花费 较 长 的 时 
间 学 悦 ， 也 不 要 感到 气候 。 对 任何 事物 来 说 ， 
你 操作 越 多 ， 瓯 越 熟 练 。 


19.1 加 载 外 部 脚本 


脚本 主要 有 两 种 类 型 ， 一 种 是 从 外 部 文 
件 〈 使 用 纯 文 本 格式 ) 加 载 的 脚本 ， 另 一 种 
是 艇 入 在 页 面 中 的 脚本 (这 一 种 将 在 下 一 市 
讲解 ) 。 这 同 外 部 样式 表 舱 入 样式 表 的 概 
念 是 类 似 的 。 

同 为 页 面 添 加 样式 表 一 样 ， 从 外 部 文件 
加 载 脚本 通常 比 在 HTML 中 和 藤 入 脚本 要 好 一 
些 ( 如 图 19.1.1 所 示 ) 。 这 样 做 的 好 处 也 是 
类 似 的 ， 即 可 以 在 需要 某 一 脚本 的 每 个 页 面 
加 载 同一 个 JavaScript 文件 。 需 要 对 脚本 进行 
修改 时 ， 就 可 以 仅 编辑 一 个 脚本 ， 而 不 是 在 
各 个 单独 的 HTML 页 面 更 新 相似 的 脚本 。 

无 论 是 加 载 外 部 脚本 还 是 艇 入 脚本 ， 均 
使 用 script (脚本 ) 元 素 。 


加 载 外 部 脚本 的 方法 

输入 <script src="script. js"></script>， 
这 里 的 script.js 是 外 部 脚本 在 服务 各 上 的 位 
置 及 文件 名 。 应 该 尽 可 能 地 将 脚本 元 系 放 在 
</body> 结束 标签 之 前 ( 参见 图 19.1.1 ) ， 而 不 
是 放 在 文档 的 head 元 素 里 (参见 图 19.1.2 ) 。 
































《!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Loading an External Script</title> 
<link rel="stylesheet" 
href="css/global.css" /> 


</head> 
<body> 
..。 所 有 的 HTML 内 容 写 在 这 里 ... 


<script src="behavior.js"></script> 
</body> 
</html> 








19.1.1 script 元 素 的 src 属 性 引用 脚本 的 
URL。 在 大 多 数 情况 下 ， 最 好 在 页 面 的 最 末尾 加 载 
脚本 ， 即 </body> 结束 标签 的 前 面 。 也 可 以 在 页 面 
的 head 元 素 中 加 载 脚本 ， 如 图 19.1.2 所 示 ， 但 这 
样 做 会 影响 页 面 显 示 的 速率 。 更 多 信息 参见 补充 材 
料 “ 脚 本 和 性 能 的 最 佳 实践 ” 








《!DOCTYPE html> 

<html lang= en > 

<head> 
<meta charset="utf-8" /> 
<title>Loading an External Script</title> 
《1-- 在 加 载 任 何 ]S 文 件 之 前 加 载 样式 表 --> 
<link rel="stylesheet" href="css/ 


global.css" /> 
<script src="behavior.js"></script> 
</head> 


<body> 
..。 所 有 的 HTML 内 容 写 在 这 里 ... 
</body> 
</html> 








19.1.2 在 这 个 例子 中 ,脚本 是 在 head 中 加 载 的 。 
它 位 于 link 元 素 的 后 面 ， 因 此 不 会 影响 CSS 文件 
先 于 脚本 开始 加 载 。 关 于 为 什么 要 尺 可 能 地 避免 在 
head 中 加 载 脚本 ， 参 见 “ 脚 本 和 性 能 的 最 佳 实践 ” 
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为 了 保持 组 织 文 件 良 好 ， 通 常 将 图 19.1.3 显示 了 一 段 JavaScript 示 
JavaScript 文件 放 在 一 个 子 文件 夹 中 (常用 的 例 。 由 于 JavaScript 是 纯 文 本 ， 因 此 你 可 以 
名 称 包 括 js、scripts 等 ) ， 参 见 2.6 节 。src 必 在 创建 HTML 和 CSS 的 同一 编辑 器 中 编写 
性 需要 反映 这 一 点 ， 就 像 指向 某 一 资源 的 其 他 JavaScript。 如 果 这 个 例子 保存 为 behavior.js， 
URL 一 样 。 例如， 如 果 图 19.1.1 中 的 文件 位 它 就 会 在 图 19.1.1 和 图 19.1.2 所 示 的 页 面 中 
于 名 为 assets/js/ 的 文件 夹 内 ， 则 应 输入 《Script 加载。 

STC="assets/js/behavior.js"></script>。 (这 只 是 

一 个 示例 ,还 有 其 他 表示 URL 的 方式 ,参见 17 节 。 ) 


/* 
当 用 户 选 择 0ther 单 选 按钮 时 ，textarea 会 变 为 可 用 的 ， 光 标 也 会 显示 在 其 中 ， 用 户 可 以 马上 输入 。 选 择 其 余 
两 个 单 选 按钮 中 的 任意 一 个 ， 则 会 禁用 textarea 


4 


(function (window, document) { 
'use strict'; 


var choices = document.getElementById('choices'), 
textarea = document.getElementById('other-description'); 


if (lchoices || ltextarea) { 
return,; 


// 默认 禁用 textarea 
textarea.disabled = true; 


// 为 单 选 按钮 添加 行为 
choices.onclick = function(e) { 
var target, 
€) 


if (le) { 


e = window.event; 


target = e.target || e.srcElement; 


// 根据 所 选 的 单 选 按 钮 ， 切 换 textarea 的 状态 
if (target.getAttribute('type') === 'radio') { 
if (target.id !== 'other') { 
textarea.disabled = true; 
} else { 
textarea.disabled = false; 
textarea.focus(); 


由 





}(window, document)); 


图 19.1.3 ”如 你 所 见 ，JavaScript 与 HTML 和 CSS 相当 不 一 样 ! 这 段 脚 本 与 16.16 市 引用 的 toggle-textarea.js 
几乎 是 一 样 的 。 本 书 配 套 网 站 上 的 例子 包含 了 额外 的 注释 ,解释 了 代码 的 工作 原理 ( 参见 www.htmlcssvqs. 
com/8ed/19 ) 。 即 便 如 此 ， 我 也 不 会 具体 地 讲解 代码 的 方方面面 ， 如 果 你 刚 开 始 接触 JavaScript， 你 会 发 现 
不 懂 的 地 方 很 多 。 我 提供 这 个 例子 ， 主 要 是 为 了 让 你 对 这 门 语言 有 个 大 致 的 感受 
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于 一 个 页 面 可 以 加 载 多 个 JavaScript 文件 ， 如 果 创 建 了 一 个 简化 文件 ， 一 定 要 确 
可 以 包含 多 个 髓 入 的 脚本 (参见 图 19.2.1 ) 。 在 保 在 HTML 中 对 脚本 的 引用 是 正确 的 ,例如 ， 
默认 情况 下 ,浏览 器 会 按照 脚本 在 HTML 中 出 <script src="behavior.min.js">。 否 则 ， 页 
现 的 顺序 对 它们 进行 加 载 ( 如 果 需 要 的 话 ) 和  ” 面 仍 会 加 载 常 规 的 文件 ， 访问 者 不 会 获得 更 
执行 。 关 于 为 什么 需要 尽 可 能 地 避免 加 载 多 个 ” 小 的 文件 这 来 的 任何 好 处 。 在 不 断 修改 脚本 
脚本 以 及 如 何 简化 脚本 ( 参见 图 19.1.4) ， 参 见 的 过 程 中 ,也 可 以 让 src 重 新 指向 常规 的 文件 。 
补充 材料 “脚本 和 性 能 的 最 佳 实践 ”。 
不 理解 JavaScript 的 浏览 器 ( 数 


E 量 很 

(function(e,c){var d=c.getElementById 少 ) 或 用 户 禁 用 了 JavaScript 的 浏 贤 览 器 会 忽 
("choices"),b=c.getElementById("other- | 

description");d8&b8&8&(b.disabled=!0,d. 略 JavaScript 文件 。 因 此 有 要 确保 页 面 不 依赖 于 


onclick=function(a){al|(a=e.event);a= JavaScript 为 用 户 提供 对 内 容 的 可 访问 性 和 基 


a.target||a.srcElement;"radio"=== 
a.getAttribute("type")&&("other"!== 本 体验 。( 部 度 依赖 JavaScript 的 Web 应 用 
a.id?b.disabled=!0:(b.disabled=!1, 三 序 通 常 例 乡 

b.focus()))})}) (window, document); 程序 通常 例外 。 ) 





19.1.4 是 的 ， 这 上段 代码 与 图 19.1.3 的 代码 是 一 样 提 示 从 技 坟 上 上 说 为 页 面 添 力 J S 
的 ， 只 是 被 压缩 过 了 。 它 看 起 来 就 像 是 一 只 猫 在 键盘 pi ee Wan 人 
上 跑 过 留 下 的 字符 ， 但 实际 上 浏览 器 可 以 理解 它们 A 大 

直接 在 HTML 中 特定 元 素 属 性 上 指定 的 
(8 国 可 以 为 外 部 脚本 指定 任意 有 效 的 文件 0 
名 ， 只 要 它们 以 .js 结尾 。 通 常 ， 压 缩 后 的 肝 告诉 你 ， 应 该 避免 使 用 它们 ， 就 像 避免 使 用 


本 以 .minjs 作为 扩展 名 ， 这 样 可 以 很 清晰 地 内 联 样 式 表 一 样 。 正 如 内 联 样 式 表 将 HTML 
将 它们 与 常规 文件 区 分 开 来 。 两 个 版 本 的 文 。 和 CSS 混合 在 一 起 ， 太 联 种 本 则 将 HTML 和 
件 都 要 保留 一 一 在 常规 文件 中 更 新 代码 ( 因 JavaScript 纪 缠 在 一 起 ， 这 与 将 它们 分 开 的 最 
rs neg oleh Fs 

是 压缩 后 ( 因为 对 浏览 器 来 说 能 


地 解析 ) 。 不 要 忘 了 每 次 更 新 完 we 
都 要 生成 一 ee。 和 否则， 访问 者 
看 到 的 仍 是 旧 的 版 本 。 


脚本 和 性 能 的 最 佳 实践 

关于 脚本 和 页 面 性 能 最 佳 实践 的 详细 讨论 超出 了 本 书 的 范围 ， 不 过 这 里 仍 会 提 到 几 个 影 
响 较 大 的 要 点 。 

最 重要 的 一 点 , 理解 浏览 器 如 何 处 理 脚 本 是 很 有 用 的 。 随 着 页 面 的 加 载 ， 在 默认 情况 下 ， 
浏览 器 会 按照 脚本 在 HTML 中 出 现 的 顺序 依次 对 每 个 脚本 进行 下 载 ( 对 于 外 部 脚本 ) 、 解 析 
和 执行 。 在 处 理 脚本 的 过 程 中 ,浏览 器 既 不 会 下 载 该 script 元 素 后 面 出 现 的 内 容 ( 哪怕 是 文 
本 ) ， 也 不 会 呈现 这 些 内 容 。 这 称 为 阻塞 行为 (blocking behavior ) 。 
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这 条 规则 对 岁入 脚本 和 外 部 脚本 都 有 效 。 可 以 想象 ， 这 会 影响 页 面 的 呈现 速率 ， 影 响 的 
程度 取决 于 脚本 的 大 小 和 它 执 行 的 动作 。 

大 多 数 浏览 器 ee 因为 JavaScript 可 能 包含 其 他 脚本 所 依赖 的 代码 、 立 即 生 成 
内 容 的 代码 或 对 页 面 进行 调整 的 代码 。 浏 览 器 需要 在 结束 呈现 页 面 之 前 考虑 所 有 这 些 问 题 。 

那么 如 何 避 免 这 一 点 呢 ? 消除 JavaScript 阻塞 最 简单 的 方法 就 是 将 所 有 的 script 元 素 放 
置 在 HTML 结束 之 前 ， 即 《/body> 结束 标签 的 前 面 ， 参 见 图 19.1.1。 

随便 花 点 儿 时 间 浏 览 一 下 其 他 人 的 网 站 ， 不 难 发 现 脚本 是 在 head 中 加 载 的 。 除 了 少 
数 必 须 这 样 做 的 情况 ， 通 常 认为 这 是 一 种 过 时 的 做 法 ， 应 当 尽 可 能 地 避免 。( 必须 这 样 做 的 
一 种 情况 就 是 加 载 第 11 章 所 述 的 HTMLS 阐 刀 也 要 
将 这 人 基 玫 在 所 用 CSS 文件 的 1ink 元 后 (这 也是 岂 于 的 考虑 ) 。 

种 简单 的 加 快 脚 本 加 载 速率 的 方法 就 是 将 JavaScript 放 在 同一 个 文件 中 (或 尽 可 能 
2 ts ) 并 压缩 代码 。 通 常 ， 压 缩 代码 会 去 除 换行 、 注 释 及 额外 的 空格 ( 以 及 其 他 
同 未 压缩 的 代码 存在 差异 的 地 方 ) 。 可 以 想象 一 下 只 在 一 个 很 长 的 行内 编写 代码 ， 而 永远 不 
项 回 车 键 。 看 看 图 19.1.4 你 就 明白 我 说 的 是 什么 意思 了 
可 以 使 用 以 下 工具 压缩 脚本 ( “ 供 下 载 的 版 本 及 文 楼” 链接 主要 是 为 高 级 用 法 提供 的 ) : 
QD Google Closure Compller 
http://code.google.com/closure/compiler/( 供 下 载 的 版 本 及 文档 ) 
http://closure-compiler.appspot.com (在 线 版 本 ) 
口 UglifyJS (使 用 第 二 个 链接 ) 
https://github.com/mishoo/UeglifyJS2 ( 供 下 载 的 版 本 及 文档 ) 
http://lisperator.net/uglifyjs/( 在 线 版 本 ， 选 择 “Open demo”) 

口 YUI Compressor (使 用 第 二 个 链接 ) 

http://developer.yahoo.com/yui/compressor/( 供 下 载 的 版 本 及 文档 ) 
人 com/yui/( 非 官 方 的 在 线 版 本 ) 

上 述 每 个 工具 都 能 减 小 文件 的 大 小 ， 而 压缩 的 结果 则 因 脚 本 而 异 。 记 住 ， 有 时 压缩 代码 
的 有 可 能 会 损坏 你 的 脚本 。 因 此 , 如 果 页 面包 括 压 缩 脚本 ,一定 要 进行 测试 。 
通常 ， 浏览 器 加 载 一 er EV 
小 比 不 同 交 件 的 忆 大 路 还 雪人 一 此 (除非 大 梨 ) 

这 是 两 种 各 用 且 强 大 的 方法 ， 但 真正 说 起 来 ， 它 们 也 只 是 一 些 皮毛 的 东西 。 关 于 脚本 加 
载 的 方法 及 其 优化 ， 强 烈 推 荐 Steve Souders 所 著 的 Even Faster Web Sites" ( O’Reilly Media， 
2009 ) 一 书 ， 以 及 他 的 网 站 www.stevesouders.com。 不 过 有 言 在 先 ，Souders 的 某 些 讨论 相对 
1 
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19.2 添加 车 入 脚本 


骨 入 脚本 位 于 HTML 文档 之 内 ， 同 能 信 
样式 表 很 相似 。 散 入 的 脚本 包含 在 script 元 
素 内 ， 如 图 19.2.1 所 示 。 租 人 脚本 并 不 是 首 
选 的 方法 (参见 19.1 节 ) , 但 有 时 必须 这 样 做 。 


沐 加 JavaScript 


《!DOCTYPE html> 

<htm] ]ang= en > 

<head> 
<meta charset="utf-8" /> 
<title>Adding an Embedded Script</title> 
<link rel="stylesheet" 

href="css/global.css” /> 

</head> 

<body> 

i 所 有 HTML 内 容 写 在 这 里 


<script> 

/* 
JavaScript 代码 写 在 这 里 
4 

</script> 

</body> 

</html> 





19.2.1 和 藤 入 脚本 没有 src 属性。 相反 ， 代 码 位 
于 页 面 之 内 。 如 果 要 上 藤 和 脚本， 应 该 尽 可 能 地 在 
《</body> 结束 标签 之 前 这 样 做 。 虽 然 也 可 以 在 head 
中 舱 入 脚本 ( 如 图 19.2.2 所 示 ) ， 但 通常 出 于 性 能 
原因 而 避免 这 样 做 


添加 艇 入 脚本 的 步骤 
(1) 在 HIML 文档 中 ,输入 <script>。 
(2) 输入 脚本 的 内 容 。 





(3) 输入 </script>。 
6 每 个 脚本 都 按照 它们 出 现在 HTML 


中 的 顺序 依次 进行 处 理 ， 无 论 是 嵌入 脚本 还 
是 外 部 脚本 (参见 19.1 节 ) 。 


尽管 sctipt 元素 必须 有 结束 标签 

(</script> ) ， 但 在 有 src 属性 的 情况 下 ， 
不 能 在 该 元 素 的 开始 标签 和 结束 标签 之 间 谈 
入 脚本 (参见 19.1 节 ) 。 也 就 是 说 ，<script 
src="your-functions.js"> 此 处 输入 其 他 功能 
</script> 是 无 效 的 。 对 于 任何 script 元 素 ， 
要 么 仅 通过 src 加 载 外 部 脚本 ， 要 么 训 入 脚 
本 于 不 会 SICs 


《<!DOCTYPE html> 

<html lang= en > 

<head> 
<meta charset="utf-8" /> 
<title>Loading an External Script</title> 
《1-- 在 加 载 任何 J]S 文 件 之 前 加 载 样式 表 --> 
<link rel="stylesheet" 

href="global.css" /> 


<script> 
/* 
JavaScript 代 码 写 在 这 里 
4 
</script> 
</head> 
<body> 
.… 所 有 的 HTML 内 容 写 在 这 里 ... 
</body> 
</html> 





图 19.2.2 在 这 个 例子 中 , 通信 脚本 位 于 head 中 。 
它 位 于 link 元 素 的 后 面 ， 从 而 让 CSS 文件 更 快 地 
加 载 。 关 于 为 什么 要 尽 可 能 地 避免 在 head 中 航 入 
脚本 ， 参 见 19.1 市 的 补充 材料 “脚本 和 性 能 的 最 
佳 实践 ” 


19.3 JavaScript 事件 


在 本 草 的 引言 中 ， 我 提 到 对 JavaScript 的 
深入 讨论 超出 了 本 书 的 范围 。 不 过 ， 我 仍然 
想 让 你 大 体 了 解 一 下 JavaScript 事件 ， 从 而 对 
JavaScript 能 做 什么 有 一 些 基 本 的 认识 。 
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可 以 编写 JavaScript 对 特定 的 、 预 定义 的 
事件 ( 由 访问 者 或 浏览 问 触 发 ) 进行 啊 应 。 
下 面 的 列表 只 是 编写 脚本 时 可 用 的 事件 处 理 
程序 的 一 些 简单 示例 。HTML5 引入 了 大 量 其 
他 的 事件 处 理 程序 ， 其 中 很 多 都 是 与 audio 和 
video 元 桑 相 关 的 。 有 的 触 屏 设备 也 开始 支持 
特殊 的 基于 触 措 操 作 的 事件 处 理 程序 。 
注意 下 面 的 列表 中 的 “mouse”【( 女 标 ) 
代表 所 有 “指针 设备 ”。 例 如 ，onmousedown 
会 在 访问 者 使 用 电子 笔 、 真 正 的 鼠标 或 其 他 
类 似 的 设备 时 被 触发 。 
D onblur: 访问 痢 离 开 先 前 获得 焦点 的 
元 系 (参见 onfocus ) 。 

D onchange: 访问 者 改变 元 素 的 值 或 内 
容 。 通 常用 于 表单 字段 ( 关于 表单 ， 
参见 第 16 章 ) 。 

口 onclick: 访问 者 点 击 特 定 的 区 域 或 在 

元 素 ( 如 链接 ) 获 得 焦点 时 按 下 回 车 键 。 
口 ondblclick: 访问 者 双击 特定 的 区 域 。 
口 onfocus: 访问 者 选择 、 点 击 或 用 制 表 
键 将 焦点 移 至 特定 的 元 系 。 

D onkeydown: 在 指定 的 元 素 上 ， 访 问 者 
下 一 个。 

口 onkeypress: 在 指定 的 元 系 上 ， 访 问 
A 
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口 onkeyup: 在 指定 的 元 系 上 ， 访问 者 在 
输入 后 松 开 一 个 键 。 

D onload: 浏览 妖 完 成 页 面 的 加 载 ， 包 
括 所 有 的 外 部 文件 (如 图 像 、 样 式 表 、 
JavaScript 等 ) 。 

口 onmousedown: 在 指定 的 元 系 上 ， 访 问 
者 按 下 鼠标 键 。 

口 onmousemove: 访问 者 移动 鼠标 指针 。 

口 onmouseout: 访问 者 在 鼠标 指针 候 留 
的 特定 元 素 上 移 开 鼠标 。 

口 onmouseover: 访问 者 将 鼠标 指 癌 元 素 。 

口 onmouseup: 访问 者 在 点 击 元 系 后 松 开 
级 标 键 ( 与 onmousedown 相反 ) 。 

D onreset: 访问 者 点 击 表 单 的 重 置 按钮 
或 在 该 按钮 获得 焦点 时 按 下 回 车 键 。 

口 onselect: 访问 者 选择 元 系 中 的 一 个 
或 多 个 字符 。 

口 onsubmit: 访问 者 点 击 表单 的 提交 按 
钮 或 在 该 按钮 获得 焦点 时 按 下 回 车 键 。 

HTML5 事件 处 理 程序 的 完整 列表 参见 

http://dev.w3.org/htmlS/spec-author-view/global- 
attributes.html。 一 些 触 屏 设备 ( 如 智能 手机 、 

平板 电脑 ) 包含 的 与 触 挽 相 关 的 事件 处 理 程 
序 包 括 touchstart、touchend、touchmove 等 


(www.W3.ore/TR/touch-events/ ) 。 
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测试 和 调试 网 页 


本 章 内 容 

口 验证 代码 

口 测试 页 面 

口 笑 试 一 些 调试 技巧 

口 检查 各 见 错误 : 一 般 问 题 
口 检查 和 常见 错误 : HTML 
口 检查 稼 见 错误 : CSS 

口 如 采 图 像 不 显示 





你 编写 好 了 全 新 的 页 面 ， 却 发 现 它们 在 
浏览 右 中 并 没有 像 你 预期 的 那样 显示 ， 或 者 
完全 不 显示 ， 或 者 在 你 的 默认 浏览 器 中 显示 
得 很 好 ， 但 客户 使 用 其 他 的 浏览 希 打 开 时 却 
发 现 页 面 显 得 有 些 奇 怪 。 

在 HIML、CSS 和 众多 的 浏览 右 ( 尤其 
是 旧 浏 览 絮 ) 和 平台 之 间 ， 很 容易 产生 各 种 
各 样 的 问题 。 本 昔 会 提示 一 些 常 见 的 错误 ， 
并 帮助 你 清除 自己 造成 的 错误 。 

这 些 调 试 技术 中 的 一 部 分 看 起 来 相当 基 
础 ， 但 网 页 的 问题 往往 也 非常 基础 。 在 查找 
大 的 问题 之 前 ， 要 确保 没有 任何 小 的 问题 。 

无 论 如 何 ， 应 该 在 一 个 或 多 个 平台 的 
几 种 浏览 器 中 对 网 站 进行 充分 的 测试 ， 查 看 
各 个 页 面 是 不 是 按照 预期 的 方式 工作 (人 参见 
20.2 节 ) 。 








20.1 验证 代码 


发 现 HIML (如 图 20.1.1 所 示 ) 和 CSS 
中 错误 〈 如 图 20.1.2 所 示 ) 的 一 种 重要 方法 
就 是 使 用 验证 需 , 这 样 就 不 用 你 目 己 追踪 了 。 
HTML 验证 器 可 以 对 代码 和 语言 规则 进行 比 
较 ， 并 将 其 发 现 的 不 一 致 的 情况 显示 为 错误 
或 警告 。 它 还 可 以 提示 语法 错误 ， 无 效 的 元 
系 、 属 性 和 值 ， 以 及 错误 的 元 素 租 套 〈 如 图 
20.1.3 所 示 ) 。 它 无 法 判断 内 容 是 不 是 由 最 能 
描述 它 的 元 素 进 行 标 记 的 ， 因 此 编写 语义 化 
的 HTML 还 得 徘 你 自己 (参见 1.3 节 ) 。 











andahalf 
aboarda 





20.1.1 将 需要 检查 的 URL 粘贴 到 Address ( 地 
址 ) 字段 。 选 择 Show Source ( 显示 源 代码 ) 选项 ， 
这 样 HTML 源 代码 就 会 出 现在 验证 需 找 到 的 错误 
的 下 方 ， 有 错误 的 HTML 片段 会 突出 显示 
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图 20.1.2 肯定 哪个 地 方 出 了 问题 ， 标 题 下 面 的 文 
本 本 不 该 这 么 大 。 我 已 经 检查 了 CSS， 问题 不 是 出 
于 设置 了 很 大 的 font-size 值 。 问 题 出 在 哪儿 呢 
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图 20.1.3 在 第 10 行 发 现 错误 原因 是 没有 使 用 
吉 束 标签 ， 错 误 地 加 上 了 另 一 个 <h1> 开始 标 


签 。 其 他 的 错误 都 是 由 第 -个 错误 引起 的 ， 因 此 只 
要 修复 了 这 个 错误 ， 页 面 就 没有 任何 错误 了 


将 页 面 放 到 万 维 网 上 之 前 ， 不 需要 确 
保 它 们 通过 验证 需 的 检查 ， 完 全 没有 错误 。 
实际 上 ， 大 多 数 网 站 都 有 一 些 错误 。 而 且 ， 
W3C 的 CSS 验证 天 会 将 用 于 属性 名 称 的 三 商 

前 级 标记 为 错误 ,但 这 并 不 意味 着 你 应 该 将 

这 些 厂商 前 级 从 样式 表 中 移 除 ( 关于 厂商 前 
级 ， 参 见 第 14 草 ) 。 

浏览 姨 可 以 处 理 很 多 











类 型 的 错误 ( 同时 
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忽略 一 些 其 他 的 错误 ) ， 从 而 以 它们 能 实现 
的 最 佳 方式 将 页 面 呈 现 出 来 。 因 此 ， 即 便 页 
面 在 验证 时 有 错误 , 也 可 能 看 不 出 来 。 不 过 ， 
有 时 错误 会 百 接 影 响 页 面 的 显示 ( 如 图 ee 1 
所 示 ) 或 行为 。 因 此 ， 应 该 使 用 验证 需 
能 地 排除 代码 中 的 错误 。 

验证 需 能 找到 的 错误 的 示例 参见 20.5 节 
和 20.6 节 。 














验证 代码 的 步骤 

(1) 首先 使 用 http://html5.validator.nu( 如 
图 20.1.2 和 图 20.1.3 所 示 ) 或 W3C 的 http:// 
validator.w3.org 对 HTML 进行 检查 。 更 多 信 
息 参 见 头 两 条 提示 。 

(2) 修复 标 出 来 的 HTML 错误 , 保存 修改 。 
需要 的 话 ， 将 文件 再 次 上 传 到 服务 硕 ， 上 再 重 
复 第 (1) 步 。 

(3) 可 以 使 用 http:/jigsaw.w3.org/css-validator/ 
检查 CSS 错误 。 类似 地 , 修复 你 看 到 的 错误 ， 
再 重新 检查 页 面 





检查 HTML 的 一 致 性 
对 于 HTML 代码 中 某 些 部 分 的 格式 ， 


HTML 是 相当 宽松 的 。 例如， 对 于 img 这 
样 的 空 元 素 ， 使 用 /> 和 > 结尾 都 是 合法 的 。 


HTML 验证 器 不 会 检查 此 类 一 致 性 问题 。 
如 果 你 希望 代码 一 致 ， 可 以 使 用 HTML Lint 
( http:/lint.brihten.com/html/ ) 。 通 过 它 可 
以 检查 空 元 素 是 否 闭 合 ， 开 始 和 结 来 标签 
2 3 入 是 否 为 小 写字 母 等 。 
W3C 的 验证 器 ( http://validator.w3.org/ ) 
使 用 的 是 http://html5.validator.nu/ 提供 的 验证 
引擎 ， 因 此 使 用 这 两 种 都 可 以 。W3C 的 错误 
消息 更 苑 读 ， 但 不 会 突出 显示 HTML 源 代 码 
的 错误 部 分 
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可 以 通过 输入 URL ( 参见 图 20.1.1 ) 、 
上 传 HTML 文件 以 及 将 HTML 粘贴 到 验证 器 
三 种 方式 对 HTML 进行 验证 。 如 果 使 用 上 传 
或 复制 粘贴 的 方式 ， 不 必 将 文件 上 传 到 服务 
器 就 可 以 进行 检查 了 。 


一 个 HTML 错误 可 能 导致 多 个 验证 

去 果 。 人 例如， 缺少 一 个 结束 标签 会 导 
致 多 条 错误 消息 (参见 图 20.1.3 ) 。 如 果 修 复 
了 这 个 结束 标签 的 问题 ， 所 有 这 些 后 续 错 误 
就 都 不 存在 了 (如 图 20.1.4 所 示 ) 。 因 此 ， 
应 该 按照 从 上 往 下 的 顺序 ， 一 次 修复 少量 错 
误 后 就 立刻 再 次 验证 ， 看 看 其 他 的 问题 是 否 
也 已 解决 。 


如 果 样 式 表 中 包含 第 11 章 介绍 的 


NA 
> NY 


.Clearfix 样式 规则 ，CSS 二 证 器 会 显示 几 
个 错误 。 这 是 由 于 使 用 了 为 旧版 本 的 Internet 
Explorer 准备 的 非 标准 的 CSS。 你 可 以 忽略 这 
些 错误 ， 它 们 不 会 影响 你 的 页 面 。 


The document is valid HTML5 + ARIA+SVG 1.1+ MathML 2.0 
(subject to the utter previewness of this service). 


器 的 检查 ，HTML 是 合法 的 





20.1.4 通过 验证 


a . [a The City Named After Queen Victoria 
; The City Named After Queen Vi.. 





An hour and a half 
aboard a comfortable car 
ferry ls all it takes to 


transport you from the 
modern, urban space that 
is Greater Vancouver to 
colonial Vancouver 
Island, seemingly stuck 
in the 18th century. The 
main town of Victoria 
showcases all the picturesque gems the British Empire was so proud of at the 
height of its spanning expansion. Representative yet inviting Victorian style 








图 20.1.5 ”刷新 页 面 后 可 以 看 到 页 面 好 看 多 了 
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20.2 ” 疯 试 页 面 


即便 代码 通过 了 验证 ， 页 面 可 能 仍然 不 像 
预期 的 那样 工作 , 如 图 20.2.1 ~ 图 20.2.3 所 示 ， 
或 者 可 能 在 一 个 浏览 右 中 是 正常 工作 的 ， 在 男 
一 个 浏览 器 中 却 有 问题 。 你 并 不 知道 用 户 使 用 

哪 种 浏览 览 堪 ， 因 此 在 不 同 的 浏览 吉 上 对 页 面 进 
行 测试 是 很 重要 的 (参见 本 市 末尾 的 补充 材料 
“关于 浏览 器 测试 的 更 多 信息 ” ) 



































20.2.1 这 个 页 面 通过 了 验证 ， 但 它 看 上 去 并 不 
像 预 期 的 那样 。 问 题 出 在 哪儿 (参见 图 20.6.2 ) 


<!DOCTYPE html> 
<html lang= en > 
<head> 
<meta charset= utf-8” /> 
<title>Le Journal</title> 
<link rel="stylesheet" 
> href="css/style.css" /> 
</head> 
<body> 


</body> 
</html> 





20.2.2 问题 出 在 指向 CSS 文件 的 链接 上 一 一 
CSS 文件 的 名 称 为 styles.css， 而 这 里 指向 的 却 是 
style.css。 浏 览 春 无 法 找到 CSS， 因 此 对 页 面 的 显 
示 是 有 问题 的 
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图 20.2.3 政 正 了 代码 中 的 文件 名 后 样式 表 束 被 
加 载 进 来 了 。 现 在 页 面 可 以 正确 显示 了 





测试 HTML 页 面 的 步骤 
(1) 对 HTML 和 CSS 进行 验证 (参见 
20.1 市) ， 作 出 必要 的 修改 。 
(2) 按照 2.7 市 的 解释 打开 页 面 。 
(3) 检查 整个 页 面 ， 确 保 与 你 希望 看 到 的 
完全 一 性 。 例 如 : 
口 格式 与 期 望 的 是 否 一 致 
口 链接 的 URL 是 否 指 癌 了 正确 的 页 面 或 
资源 ( 可 以 通过 激活 链接 并 查看 结 
对 URL 进行 测试 ) 
口 所 有 的 图 像 都 出 现 了 吗 ? 它 们 的 位 置 
和 对 齐 方式 是 对 的 吗 ? 
口 如 果 你 检查 的 是 啊 应 式 网 页 ， 网 页 布 
局 是 否 能 适应 不 同 的 屏幕 尺寸 
(4) 在 不 关闭 浏览 硕 中 页 面 的 情况 下 ， 打 
开 有 关 的 HTML 或 CSS 文 档 , 作出 必要 的 改动 。 























(5) 保存 修改 。 
(6) 切换 到 浏览 器 ， 刷 新 页 面 并 查看 所 作 
的 改动 。 


(7) 重复 第 (3) 步 至 第 (6) 步 ， 下 到 你 对 网 
页 满意 为 止 。 有 时 候 可 能 需要 测试 很 多 次 才 
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能 解决 问题 。 如果 尝试 很 多 次 后 仍然 失败 了 ， 





请 再 次 验证 代码 ， 确 保 没 有 引入 新 的 错误 。 
(8) 从 第 C2) 步 开 始 ， 在 其 他 的 浏览 融 中 
执行 同样 的 测试 流程 ， 直 到 满意 并 认为 页 面 
做 好 了 发 布 准备 为 止 。 
(9) 将 文件 上 传 至 服务 需 。 
(10) 回 到 浏览 大 ， 在 地 址 栏 中 输入 页 面 
Wa re et 
(11) 再 次 对 页 面 进行 检查 ， 确 保 没 有 任 


何 问 题 (很 容易 忘记 上 传 图 像 或 者 页 面 需 要 
的 其 他 文件 ) 。 同 时 ， 如 果 访 问 者 可 能 通过 


移动 设备 访问 网 站 的 话 ， 别 忘 了 在 移动 设备 
上 对 其 进行 检查 。 


测试 工作 流 

一 种 常见 的 测试 工作 流 就 是 在 构建 页 
面 的 过 程 中 定期 在 几 个 浏览 器 中 对 页 面 进 
人 当 页 面 完 成 以 后 ， 再 在 全 套 浏 览 

器 中 检查 ， 对 代码 作 必 要 的 修改 。 完 成 整 
人 可 能 还 需要 在 浏览 器 中 再 次 
进行 测试 ， 确 保 整 个 网 站 没有 问题 。 

我 建议 首先 对 网 站 的 本 地 版 本 进行 测 
试 和 改进 ( 参见 “测试 HTML 页 面 的 步骤 ” 
中 的 第 (1) ~ (8) 步 ) ， 这 是 在 文件 上 传 到 
服务 器 上 (参见 第 (9) 步 ) 之 前 进行 的 。 将 
ER 
的 检查 ， 不 过 针对 的 是 服务 器 上 的 文件 。 
无 论 你 对 本 地 文件 做 了 多 少 次 检查 ， 都 不 
要 跳 过 这 一 步 ， 因 为 服务 器 上 的 网 站 才 是 
访问 者 使 用 的 网 站 ( 参见 第 (10) ~ (11) 步 )。 


如 果 浏 览 器 中 显示 的 是 HTML 代码 
而 不 是 页 面 ， 要 确保 文件 使 用 的 是 .html 或 
.htm 扩展 名 (而 不 是 像 .txt 这 样 的 扩展 名 ) 。 
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ES 有 有 时候， 页 面 上 的 问题 并 不 是 你 的 错 ， 尤 其 是 样式 上 的 问题 。 在 认为 问题 出 在 代码 上 之 
前 ， 一 定 要 确保 浏览 器 对 过 到 问题 的 特性 是 支持 的 。 附录 A 和 附录 B 中 有 关于 HTML 和 CSS 
特性 的 浏览 器 支持 情况 的 资源 链接 。 关 于 浏览 器 支持 信息 ，Can I Use ( http://caniuse.com ) 和 
Quirksmode ( www.guirksmode.org/css/ ) 是 两 处 非常 宝贵 的 资源 。 


Bn 井 行 测 试 
， 大 多 数 网 站 开发 人 士 会 在 以 下 浏览 器 中 对 网 站 进行 验证 。 
口 ee (www.google.com/chrome ) 的 最 新 版 本 。Chrome 会 在 你 的 计算 机 上 自动 进行 
和 更新， 大 约 每 隔 六 周 就 会 发 布 一 个 新 的 版 本 。 
口 Firefox( www.firefox.com ) 的 最 新 版 ,Firefox 同 Chrome 0 更 新 和 发 布 频 率 也 非常 快 。 
口 Internet Explorer 8+， 只 针对 Windows。 (IE8 的 市 场 份额 会 越 来 越 少 ， 最 终 可 能 会 从 
你 的 验证 清单 中 消失 。 ) 可 从 www.microsoft.com 下 载 夺 的 各 个 版 本 。 
口 Safari ( www.apple.com/safari/ ) 的 最 新 版 ， 有 时 候 是 Safari 5+。Safari 预 装 在 OSX 中 。 
至 于 Opera, 开发 人 员 通 常会 选择 测试 它 ，Opera 在 世界 上 很 多 地 区 都 有 少量 的 市 场 份 额 。 
Opera 的 下 载 地 址 为 WWw.opera.com/。 
好 消息 是 ， 在 不 考虑 IE8 甚至 IE9 的 情况 下 ， 这 些 浏览 器 对 HTML 和 CSS 特性 的 支持 能 
力 几 乎 在 同一 个 水 平 。 这 意味 着 你 通常 很 难看 到 不 同 浏览 器 之 间 的 差异 ， 除 非 你 的 页 面 用 到 
了 特别 新 的 HTMLS 或 CSS3 特性 。 因 为 IE8 已 经 很 上 昌 了 ， 因 此 如 果 你 的 网 站 在 IE8 中 和 在 现 
代 浏 览 器 中 的 样子 稍 有 出 入 ， 也 是 可 以 接受 的 。 
获取 测试 用 的 浏览 器 
可 以 使 用 上 面 提 供 的 链接 下 载 并 安装 这 些 浏览 器 ， 但 如 果 你 使 用 的 是 一 台 Mac， 该 如 何 
测试 下 呢 ? 如果 你 使 用 的 是 Windows， 如 何 测试 Safari 以 及 不 同 版 本 的 了 正 呢 ?这 里 给 出 了 
一 些 方案 。 
口 虚拟 机 ( VM ) 是 运行 在 你 的 计算 机 上 的 一 个 独立 的 操作 系统 。 微 软 为 不 同 版 本 的 
Windows 和 正 提 供 了 虚拟 机 ， 因 此 你 可 以 在 Mac、Windows 或 Linux 机 器 上 对 人 正 进 
行 测试 。 这 些 虚 拟 机 位 于 www.modern.ie/en-US/virtualizationtools#downloads。 不 能 在 
一 台 Windows 机 器 上 运行 Mac 虚拟 机 以 测试 Mac 浏览 器 。 


口 使 用 BrowserStack (www.browserstack.com ) 和 Sauce Labs (http://saucelabs.com ) 可 
以 在 很 多 浏览 器 和 移动 设备 上 免费 测试 你 的 页 面 
在 手机 和 平板 电脑 上 测试 
你 可 能 至 少 布 望 在 iOS 和 Android 设备 上 进行 测试 。 测 试 页 面 的 移动 兼容 性 是 很 有 挑战 的 ， 
因为 通常 很 难 在 移动 设备 上 对 网 站 进行 修改 。 解 决 的 办 法 包括 使 用 BrowserStack 和 Sauce 
Labs( 注意， 使 用 模拟 器 并 不 一 定 与 实际 设备 上 的 效果 完全 一 致 ) 。 
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口 使 用 苹果 的 iOS Simulator 测试 页 面 在 iPhone 和 iPad 上 的 情况 。 这 种 方法 最 大 的 
局 限 ' 性 在 于 该 模拟 器 只 能 在 OS X 上 运行 ， 在 Windows 上 没有 可 替代 的 软件 。iOS 
Simulator 是 免费 的 Xcode 的 一 部 分 ， 下 载 地 址 为 http://developer.apple.com/xcode/。 
口 DeviceAnywhere ( www.deviceanywhere.com ) 提供 了 一 种 在 线 访 问 各 种 不 同 移动 设备 
进行 测试 的 收费 功能 。DeviceAnywhere 也 有 免费 版 本 ， 不 过 一 次 只 能 用 10 分 钟 。 
口 使 用 Electric Plum 针对 Windows 的 iPhone 和 iPad 模拟 器 ( www.electricplum.com ) 。 
这 不 是 由 苹果 提供 的 ， 因 此 与 苹果 的 iOS Simulator 不 一 样 。 
口 使 用 为 其 他 设备 和 移动 浏览 器 准备 的 模拟 器 。Mobile Boilerplate 维护 了 一 个 列表 ， 见 
https://github.com/hSbp/mobile-boilerplate/wiki/Mobile-Emulators-&-Simulators。 
口 查看 Open Device Lab ( http://opendevicelab.com ) ， 看 看 你 身边 是 否 有 可 供 免费 测试 的 
设备 。 
口 如 果 你 有 设备 ， 结 合 使 用 Adobe Edge Inspect ( http://html.adobe.com/edge/inspect/) 可 
以 简化 测试 和 修正 问题 的 过 程 。 
浏览 器 市 场 变化 很 快 : 当 你 阅读 本 书 的 时 候 ， 这 些 浏览 器 又 会 有 一 些 新 的 版 本 发 布 ， 
会 冒 出 一 些 新 的 设备 。 不 过 ， 只 要 遵循 渐进 增强 的 原则 ， 你 的 网 站 就 可 以 为 旧 的 浏 ， 、 
简单 的 体验 ， 为 现代 浏览 器 提供 增强 的 体验 。 



































20.3 ”尝试 一 些 调 试 技巧 D 留意 输入 错误 。 很 多 令 人 费解 的 错误 
是 由 简单 的 输入 错误 造成 的 。 例 如 ， 
你 现在 应 该 已 经 做 了 一 些 测试 ， 也 发 现 在 HTML 中 以 某 种 方式 拼写 类 名 ， 却 
了 一 些 bug。 下 面 是 用 于 排查 网 页 错误 的 一 些 在 CSS 中 使 用 了 另 一 个 名 称 。 
真实 技巧 。 口 在 CSS 中 ， 如 果 不 确定 问题 是 出 在 属 
口 痛 先 检查 常见 的 错误 。 性 上 还 是 出 在 选择 名 上 ， 可 以 试 春 在 选 
口 逐步 开展 工作 。 ee 下定 择 器 上 添加 极其 简单 的 声明 ， 如 color: 
每 次 改动 后 进行 测试 。 这 样 才 能 在 问 red; 、border: 1px solid red; 等 (如 
题 出 现 之 后 定位 到 间 题 的 来 源 。 末 red 已 经 用 于 网 页 的 设计 ， 也 可 以 选 
口 调试 时 , 从 你 能 确保 正确 的 地 方 开始 。 择 一 种 不 常见 的 颜色 ， 如 pink ) 。 如 果 
之 后 再 逐一 添加 可 能 出 问题 的 部 分 ， 元 素 变 成 红色 , 那么 问题 就 出 在 属性 上 ， 
每 次 梁 加 完 以 后 都 在 浏览 硕 中 进行 测 否则 问题 就 出 在 选择 器 上 ( 假定 不 存在 
试 ， 生 到 找到 问题 的 来 源 为 止 。 另 一 个 特殊 性 更 强 的 选择 器 ， 也 不 存在 
口 根据 前 面 的 要 点 ， 用 排除 法 寻找 产生 比 当前 选择 器 更 靠 后 的 选择 器 ) 。 
问题 的 代码 厂 段 。 例 如 ， 可 以 注释 挥 口 使 用 一 个 或 多 个 开发 工具 ， 下 接 在 浏 
一 半 人 代码， 检查 问题 是 否 出 于 另 一 半 览 器 中 对 HTML 或 CSS 进行 修改 测试 。 
eo 或 者 使 用 这 些 工具 审查 代码 ， 试 着 对 
的 代码 中 注释 抒 更 小 的 部 分 ， 直 到 找 问题 进行 定位 。( 人 参见 补充 材料 “浏览 器 
出 问题 。 (参见 3.16 节 和 7.2 节 。) 开发 工具 ”, ) 
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.excerpt { 
border-top: 1px dotted #ccc; 
margin: 0 .5em 2em 0; 


} 


.excerpt .title { 
font-size: 1.25em; 
line-height: 1.2; 


} 


/* 

.more, 

.excerpt .date { 
text-align: right; 

} 


.excerpt .date { 
line-height: 1; 
margin: 0 1iem 0 0; 
padding: 0; 
position: relative; 
top: -1em; 


7/ 


.photo { 
float: left; 
height: 300px; 
width: 400px; 





图 20.3.1 我 注释 挥 了 这 段 代码 中 间 的 一 部 分 (位 
于 信和 */ 之 间 ), 以 查看 它 是 不 是 出 错 的 原因 ,注意 ， 
很 多 HTML 和 CSS 编辑 硕 都 包含 代码 高 亮 ， 即 目 动 
为 元 素 、 选 择 需 等 设置 不 同 的 颜色 。 这 对 调试 是 有 
帮助 的 。 例 如 ， 如 果 将 CSS 属性 名 称 打 错 了 ， 编 辑 
如 就 不 会 以 预期 的 颜色 显示 它 ， 表 明 它 是 无 效 的 





























浏览 器 开发 工具 

浏览 器 都 包含 帮助 你 调试 页 面 或 者 具 
有 其 他 功能 的 工具 。 你 会 发 现 ， 一 种 反复 
用 到 的 特性 就 是 直接 修改 CSS 或 HTML 并 
立即 查看 它们 对 页 面 的 影响 。 这 可 以 让 你 
快速 地 对 修改 进行 测试 ， 满 意 之 后 再 将 它 
们 包含 到 代码 里 去 。 


下 面 是 各 个 浏览 器 中 最 常用 的 工具 。 
DQ Chrome: DevTools (http://developers. 
google.com/chrome-developer-tools/ ) 。 
口 Firefox: Firefox 有 内 置 工具 (https:// 
developer.mozilla.org/en-US/docs/ 
Tools ) ， 但 是 Firebug 插件 特别 流 

行 ( http://getfirebug.com ) 。 此 外 ， 
Web Developer ( http://chrispederick. 
com/work/web-developer/) 是 稍 有 
区 列 的 过 种 二 愉 但 地 站 党 好 于 
在 同一 个 链接 的 页 面 上 ， 也 可 以 下 
载 用 于 Chrome 的 版 本 。 

QQ Internet Explorer: Fl12 Developer Tools 

(http://msdn.microsoft.com/en-us/ 

library/hh772704(v=vs.85).aspx ) 。 

口 Opera: Dragonfly ( www.opera.com/ 
drasonmfy/ 用 是 1 
特性 还 没有 成 熟 。 

OD Safari: Web Inspector ( http://developer. 
apple.com/technologies/safari/developer- 
tools.html ) 。 


网 上 还 有 演示 如 何 使 用 这 些 工具 的 文档 
和 视频 。 在 20.6 节 有 使 用 Chrome DevTools 
的 示例 。 


20.4 ”检查 常见 错误 : 一 般 问题 


训 宽 间 之 间 的 差异 可 能 是 由 一 些 不 明显 
的 浏览 融 漏洞 造成 的 ， 也 可 能 是 由 于 使 用 新 
技术 造成 的 ,但 更 常见 的 则 是 出 于 一 些 简 单 
的 问题 。 

每 个 人 在 从 新 手 到 专家 的 道路 上 难免 会 
犯 一 些 低级 错误 。 例 如 ， 你 有 可 能 认为 问题 
出 在 代码 上 ， 从 而 伦 了 大 量 时 间 进 行 调试 ， 
最 后 才 发 现 你 修改 的 是 一 个 文件 ， 上 传 和 得 
看 的 却 是 服务 大 上 的 吃 一 个 文件 ! 
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下 列 建议 中 的 大 多 数 适用 于 使 用 网 站 在 
服务 货 上 的 URL 对 网 站 进行 测试 的 情形 。 


查 检 笼统 的 常见 错误 

口 根据 20.1 市 的 描述 ， 对 代码 进行 验证 。 
这 是 一 个 很 好 的 起 点 ， 因 为 这 样 就 能 
排除 代码 语法 相关 的 错误 了 。 

口 确保 已 上 传 要 测试 的 文件 。 

口 确保 上 传 的 文件 的 位 置 是 正确 的 。 

口 确保 输入 的 URL 与 要 测试 的 文件 是 对 
应 的 。 如 果 要 查看 的 页 面 是 从 另 一 个 
页 面 跳 转 过 来 的 ， 确 保 链 接 中 的 URL 
与 页 面 的 文件 名 和 位 置 是 完全 匹配 的 。 

口 确保 上 传 文件 之 前 已 经 进行 了 保存 ( 包 
括 最 新 修改 ) 。 

口 确保 上 传 了 所 有 辅助 文件 (包括 CSS、 
图 像 、 音 乐 、 视 频 等 ) 。 

口 确保 URL 的 大 小 写 与 文件 名 的 大 小 写 
是 完全 匹配 的 。( 这 也 是 推荐 全 部 使 
用 小 写字 母 的 原因 ， 这 样 做 可 以 降低 
输入 URL 时 产生 错误 的 可 能 性 一 一 既 
针对 网 站 开发 人 员 , 也 针对 访问 者 。) 
确保 文件 名 中 没有 使 用 空格 ( 应 使 用 














还 是 有 问题 
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短 椭 线 代 蔡 空格 分 隔 单词 ) 。 

口 如 果 在 以 前 的 测试 中 曾 禁 用 某 项 浏览 
俘 功 能 (如 JavaScript 文 持 ) ， 确 保 
重新 局 用 这 些 功能 。 

口 确保 问题 不 是 出 上 和 浏览 硕 本 喘 。 对 于 
这 一 点 ， 最 简单 的 方法 就 是 换个 浏览 
答对 页 面 册 测试 一 过 。 

在 接 下 来 的 两 节 里 ， 我 会 介绍 如 何 检 查 

HTML 和 CSS 中 的 常见 错误 。 








20.5 ”检查 弟 见 错误 : HTML 


有 时 ， 问 题 出 现在 HTML 中 。 

检查 HTML 常见 错误 的 方法 

口 很 容易 出 现 一 两 个 输入 错误 ， 如 图 20.5.1 
所 示 。 确 保 所 有 的 拼写 都 是 正确 的 ， 
属性 的 值 都 是 有 效 的 ， 如 图 20.5.2 所 
示 。 使 用 HTML 验证 需 可 以 查 出 这 类 
错误 ， 从 而 能 迅速 地 改正 〈 人 参见 20.1 
De 

口 留心 元 系 的 航 套 。 例 如 ， 如 采 先 开始 
<p>， 再 使 用 <em> ， 就 要 确保 </em> 结 
束 标 签 位 于 最 后 的 《/p> 之 前 。 








如 果 你 阅读 完 本 章 ， 发 现 还 是 有 一 些 问 题 无 法 解决 ， 这 里 还 有 一 些 其 他 的 建议 。 
口 当 我 建议 你 休息 一 下 的 时 候 ， 不 要 认为 我 的 建议 是 出 于 傲慢 。 有 有 时候， 你 能 做 出 的 最 
住 选 择 就 是 暂时 将 问题 搁 到 一 边 。 当 你 回头 再 处 理 时 ， 答 案 可 能 就 在 眼前 。 相 信 我 ， 


我 有 过 这 样 的 经 历 ! 


口 回 到 页 面 能 正确 工作 的 最 近 的 版 本 。( 为 此 ， 要 在 建立 页 面 的 过 程 中 保存 页 面 的 副本 ， 
从 而 在 必要 的 时 候 能 回 到 历史 版 本 。 ) 然后 再 一 点 一 点 地 增添 新 的 元 素 ， 并 随时 进行 


测试 。 


口 对 于 页 面 链接 到 的 资源 ( 如 CSS、 图 像 、JavaScript 或 媒体 文件 ) ， 直 接 在 浏览 器 的 
地 址 栏 中 输入 资源 的 URL， 确 保 该 资源 确实 是 存在 的 。 

口 还 有 很 多 网 站 用 于 搜索 问题 的 答案 。Stack Overflow ( www.stackoverflow.com ) 和 SitePoint 
(www.sitepoint.com/forums/ ) 便 是 两 个 例子 。 你 还 可 以 搜索 到 一 些 其 他 类 似 的 网 站 。 
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口 如 有 果 重 首 字 符 或 特殊 符号 没有 正常 显 
示 ， 要 确保 文档 head 元 素 开始 后 有 
<meta charset="utf-8" /> 语句 (如果 
不 使 用 UTF-8， 也 可 以 使 用 其 他 恰当 
的 字符 编码 ) ， 同 时 确保 文本 编辑 器 
是 使 用 与 之 相同 的 编码 保存 HTML 文 
件 的 。 如 果 还 有 问题 ， 试 着 使 用 恰当 
的 字符 引用 。 

口 确保 属性 值 是 用 直 引 号 而 不 是 曲 引 号 
包围 的 。 如 果 属 性 值 是 用 双 引 号 包围 
的 (这 也 是 惯例 ) ， 则 属性 值 中 可 以 
有 单 引号 ， 如 图 20.5.3 所 示 。 如 果 属 
性 值 本 身 包含 双 引 号 ， 则 应 使 用 字符 
引用 ， 如 图 20.5.4 所 示 。 

D 不 要 对 空 元 素 使 用 分 开 的 开始 标签 和 
结束 标签 ， 如 图 20.5.5 所 示 。 ( 从 技 
术 上 上 说， 即便 省 略 结束 标签 ， 或 者 对 
空 元 素 添 加 结束 标签 ， 浏 览 郁 也 能 
确 地 显示 ， 但 最 好 还 是 严谨 一 些 。 ) 


















































<img scr="woody.jpg" width="200px" 





height="150px" alt="Woody the cat” /> 


20.5.1 你 能 找 出 问题 吗 ? 我 将 src 拼 错 了 ， 还 
在 width 和 height 的 值 中 使 用 了 单位 。 如 果 你 没 
有 注意 到 这 些 错 误 ， 可 以 使 用 HTML 验证 需 。 它 
们 可 以 标 出 这 类 输入 错误 ， 从 而 节省 发 现 这 些 错误 
的 时 间 


<img src="woody.jpg" width= 200 ”height= 150 


alt="Woody the cat”/> 





图 20.5.2 在 正确 的 版 本 中 ，src 的 拼写 是 正确 的 ， 
width 和 height 的 值 中 也 去 邱 了 px 


<img SITC= jungle.jpg” width= 325” height= 275- 


alt="Llumi's Jungle” /> 





图 20.5.3 ”如 果 属 性 值 包含 单 引 号 ， 可 以 照常 用 双 
引号 包围 属性 值 








<img src="cookie-the-cat.jpg” width="250" 


height="200" alt="Cookie's saying, 
&quot;Enough!&quot;"” /> 








图 20.5.4 ”如 果 属 性 值 包含 双 引 号， 属性 值 里 的 双 
引用 号 束 应 使 用 字符 引用 











<img src="jungle.jpg" width="325" height="275" 


alt="Llumi's jungle"></img> 





图 20.5.5 不 要 对 空 元素 ( 如 img ) 包含 结束 标签 ， 
HTML 验证 融会 将 这 个 例子 标记 为 错误 
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尽管 CSS 的 语法 相当 简单 明了 ， 但 它 也 
有 一 些 篆 见 的 陷阱 ， 特 别 是 如 果 你 习惯 了 编 
号 HTML 的 话 。CSS 验证 圳 可 以 将 如 本 节 讨 
论 的 这 类 错误 标示 出 来 ， 因此， 在 查看 CSS 
以 寻找 错误 之 前 ， 要 先 对 样式 表 进行 验证 (人参 
见 20.1 节 ) 。 





检查 CSS 常见 错误 的 万 法 

口 确保 使 用 冒号 ( : ) 分 隔 属性 和 值 ， 而 
不 是 像 在 HTML 中 那样 使 用 等 号 ， 如 
图 20.6.1 和 图 20.6.2 所 示 。 





pi 


font-size=1.3em; 


} 








图 20.6.1 
很 难 


哎呀 ， 改 变 用 秆 号 分 阳 属 性 和 值 的 习惯 


pl 


font-size: 1.3em; 


} 








图 20.6.2 好 多 了 。 属性 和 值 之 间 应 该 使 用 冒号 。 
在 冒号 之 前 或 之 后 添加 额外 的 空格 不 会 产生 影响 ， 
但 通常 在 冒号 之 后 加 上 一 个 空格 
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口 确保 使 用 分 号 〈; ) 结束 每 个 属性 -~ 值 
对 ( 即 声明 ) 。 确保 没有 多 余 的 分 号 ， 
如 图 20.6.3 和 图 20.6.4 所 示 。 


| 


font-size: 1.3em font-style: italic;; 


font-weight: bold; 





图 20.6.3 叉 错 了 。 每 个 属性 - 值 对 之 间 必 须 有 且 
只 能 有 一 个 分 号 。 这 里 ， 有 一 处 少 写 了 一 个 分 号 ， 
另 一 处 多 写 了 一 个 分 号 


/* 还 是 有 问题 ， 但 更 容 多 发 现 问题 了 */ 
p { 

font-size: 1.3em 

font-style: italic;; 

font-weight: bold; 
} 


/* 这 是 正确 的 版 本 */ 

p { 
font-size: 1.3em; 
font-style: italic; 
font-weight: bold; 





图 20.6.4 ”如 果 每 个 属性 - 值 对 都 独占 一 行 ， 错 误 
就 更 容易 发 现 了 ， 因 为 这 样 分 号 就 不 会 混在 一 大 片 
属性 、 值 和 冒号 之 中 了 
口 不 要 在 数字 和 单位 之 间 添 加 空格 ， 如 
图 20.6.5 和 图 20.6.6 所 示 。 

















p { 
font-size: .8275 em; 
} 
图 20.6.5 ”又 错 了 。 不 要 在 数字 和 单位 之 间 添 加 
空格 
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p { 


font-size: .8275em; 





} 





图 20.6.6 这 次 对 了 。 注 意 冒 号 和 值 之 间 的 空格 是 
可 选 的 (但 通常 包含 这 个 空格 ) 

口 不要 起 了 后 括号 。 

口 确保 使 用 可 接受 的 值 。 像 font-style: 
none; 这 样 的 声明 是 无 效 的 ， 因 为 该 属 
性 的 空 值 为 normal。 

口 使 用 舱 入 样式 表 时 ,不 要 忘 7 了 </style> 
结束 标签 (无论 如 何 ， 在 多数 情 况 下 
你 都 应 该 避免 ) 。 

口 确保 HTML 文档 正确 地 指向 CSS 文 件 。 

口 留 意 CSS 选择 种 之 间 的 空格 和 标点 
符号 。 

口 确保 浏览 各 文 持 你 编写 的 代码 ， 尤 其 
是 最 新 特性 ， 因 为 浏览 带 在 CSS3 成 
长 的 过 程 中 也 在 不 断 演变 。 关 于 浏览 
伪 对 新 特性 的 支持 情况 参见 Can I Use 
( http://caniuse.com ) 或 者 Quirksmode 
(http://www.quirksmode.org/css/ ) 。 
CSS 验证 硕 无 法 判断 浏览 硕 是 否 文 持 
某 个 CSS 特性 ,但 如 末 输 入 的 选择 六、 
属性 或 值 是 CSS 中 不 存在 的 ， 验 证 可 
仍 会 给 出 提示 。 

口 使 用 浏览 器 开发 工具 审查 浏览 器 所 解 
析 的 样式 规则 ， 从 而 快速 地 查 出 哪些 
代码 没有 按照 预期 进行 解析 ， 或 者 查 
看 所 应 用 的 特殊 性 规则 ， 如 图 20.6.7 
所 示 ( 参见 20.3 市 补充 材料 “浏览 可 
RL 
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站 | Elements | Resources Timeline 


了 <body> 
VvY<div class="page"> 
<!=— ==== START NMASTHEAD ==== 一 
p<header class="masthead” role="banner">.</header> 
<|-— end masthead 一 一 > 
vxdiv class=" container clearTix"> 
二 | 一- ==== START MAIN ==== ——> 
VY<main role="mainNn"> 
p<xsection Class="post"> /Section> 
VY<xsection class="post"> 
<hi>The City Named After Queen Victorias</h]1> 
<img src="img/victoria. ipg” alt class="post-photo"> 
<Giv Class="post—-blurb">.</div> 
p<Tooter class="Tooter">.</footer> 
</SeEction> 
px<nayv role="Nnavigation"S.</Nav> 
</Main> 
<!-—— End main 一 -> 
<|I-—— ==== START SIDEBAR ==== 一 > 
Pp <div class="sidebar">.x</0iv> 
<!-—— end sidebar 一 ~ 


-em 


巴 ,并 AQ html body 


Network Sources 


div.page div.container.clearfix main 


20.6.7 





Profiles Audits 





Console 
| pb Computed Style 
VStyles 
element.style { 


LisShowinherited 


十 涛 阁 : 


) 

| Matched CSs RuUles 

@media only screen and (min-width:; 4Bem) leiournal. css:636 

hi { leiournal.css:650 
font—-size: 3.25em; 

} 

hl 苹 Leiournal.css:130 


color: 图 #212121; 
font—family: 'Lato', sans-serif; 
于 BR 起 一 土 过 忆 之 Se 








font—weioht: 300; 
LettEr 一 Spacing: -2px; 
line-heioht: .975; 
margin-bottom: .4125em; 


aimLFST caeesDO0 


这 里 使 用 Chrome 的 DevTools 对 代码 片段 <ch1i>The City Named After Queen Victoria</h1> 进行 


了 审查 。HTML 显示 在 左 侧面 板 ， 应 用 于 该 元 素 的 CSS 显示 在 右 侧 面板 。 其 他 浏览 器 的 工具 跟 DevTools 
配置 相似 。font-size 设置 上 有 一 条 删除 线 ， 表 示 这 条 声明 被 另 一 条 规则 ( 显示 在 媒体 查询 上 面 的 那 条 ) 
覆盖 了 。 这 样 的 结果 是 我 在 这 个 例子 中 想 要 的 效果 ， 但 你 可 以 使 用 这 种 技术 跟踪 样式 没有 按照 预期 进行 应 
用 的 原因 。 还 可 以 编辑 HIML 和 CSS 规则 ， 并 直接 在 浏览 需 中 测试 修改 。 所 有 的 浏览 器 开发 工具 都 允许 
这 种 行为 。 如 果 你 对 结果 满意 ， 就 可 以 对 HTML 和 CSS 文件 作出 真实 修改 





20.7 ”如 果 图 像 不 显示 


小 红色、 碎片 图 标 、 和 替代 文本 ， 或 者 什 
么 都 不 显示 一 一 这 都 是 网 像 未 能 正确 加 载 的 
标志 ， 如 图 20.7.1 和 图 20.7.2 所 示 。 





<body> 
<h1>The City Named After Queen Victoria</h1> 


<img src="img/Victoria.jpg" width="370" 

> height="220" alt="A weathered life ring 

> indicates you're headed toward another time 
”and place.” /> 


<p>An hour and a half aboard ...</p> 
</body> 
</html> 





20.7.1 图 像 的 文件 名 为 victoriajpg， 但 在 
HTML 中 ， 引 用 的 却 是 Victoria.jpg ( 以 大 写字 母 V 
开头 ) 。 因 此 ， 在 服务 右上 检查 页 面 时 ， 图 像 不 会 
显示 











SA ) | The City Named After Que x & 





© 本 已 [| britishcolumbiaspots.com/city-of-victoria.html 


The City Named After Queen Victorla 


An hour and a half 
aboard a comiortable car 
ferry is all it takes to 
transport you from the 
modern, urban space that 
is Greater Vancouver to 
colonial Vancouver 
Island, seemingly stuck 
in the 18th century. The 
main town of Victoria 
showcases all the picturesque gems the British Empire was so proud of at the 
height of its spanning expansion. Representative yet inviting Victorian style 








20.7.2 在 你 的 计算 机 上 ， 如 果 系 统 不 区 分 文件 
名 的 大 小 写 ， 页 面 看 起 来 就 没有 问题 。 但 将 页 面 发 
布 到 区 分 大 小 写 的 服务 右上 以 后 , 便 无 法 找到 图 像 。 
像 Chrome 这 种 浏览 妖 就 仅 会 显示 一 个 破 人 雄 图 标 

















修复 缺失 的 图 像 
口 首 乞 检查 岁 像 在 服务 天 上 的 文件 名 是 
人 否 与 img 元 系 中 引用 的 名 称 严 格 匹 配 ， 
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包括 大 小 写 、 扩 展 名 , 如 图 20.7.1 所 示 。 
不 要 在 文件 名 中 包含 空格 ,参见 1.6 市 。 
口 确保 jing 元 系 的 src 属 性 中 的 图 像 
URL 是 正确 的 。 一 种 简单 的 测试 方法 
就 是 将 图 像 放 到 HTML 页 面 所 在 的 目 
录 。 这 样 就 只 需要 img 元 素 中 的 文件 
名 和 扩展 名 正确 就 可 以 了 ， 无 需 引 入 
路 径 信 息 。 如 果 图 像 显 示 出 来 了 ， 问 
题 很 可 能 就 出 在 src 上 上。 不过， 将 图 
像 放 在 HTML 文件 所 在 的 目录 并 不 好 ， 
因为 这 样 的 话 ， 网 站 很 快 就 会 变 得 无 
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序 。 因 此 ， 在 测试 之 后 ， 要 将 图 像 从 
HTML 页 面目 录 移 出 ， 并 修改 指 癌 图 
像 的 src 路径 。 参 见 1.7 节 。 

口 如 果 在 你 的 计算 机 上 查看 页 面 时 图 像 
是 显示 的 ， 而 将 页 面 上 传 至 服务 善之 
后 ， 图 像 却 没 有 显示 出 来 ， 要 确保 已 
经 将 图 像 上 传 到 了 服务 帮 。 

口 把 图 像 保存 为 PNG、JPEG 或 GIF 格 
式 了 吗 ? 如 果 是 的 话 ， 所 有 的 浏览 带 
都 能 显示 该 图 像 ; 如 采 是 其 他 格式 ， 
那 就 很 难说 了 。 更 多 信息 参见 第 5 章 。 








图 灵 社 区 会 员 wenshanjun 专 享 尊重 版 权 








发 布 网 站 


本 章 内 容 

口 获得 域名 

口 为 网 站 寻找 主机 

口 将 文件 传送 至 服务 从 


当 你 完成 自己 的 杰作 并 准备 好 将 它 展现 给 
公众 时 ， 必 须 将 页 面 传送 到 万 维 网 上 ， 人 们 才 
能 看 到 这 些 页 面 。 本 章 介 绍 了 所 需 的 步骤 : 获 
取 域 名 ， 寻 找 Web 主机 ， 将 域名 与 主机 连接 
起 来 ， 以 及 将 文件 上 传 到 主机 的 服务 器 上 。 

如 果 你 希望 更 改 Web 主机 ， 可 以 将 网 站 
从 一 个 服务 器 转移 到 另 一 个 上 面 。 你 的 域名 
及 整个 网 站 的 URL 可 以 保持 不 变 。 

在 发 布 页 面 之 前 和 之 后 ， 要 确保 对 页 面 
进行 彻底 的 测试 。 更 多 细 市 信息 参见 第 20 章 。 
21.1 获得 域名 

在 访问 者 能 够 看 到 你 的 网 站 之 前 ， 需 要 
为 网 站 关联 一 个 域名 ， 如 图 21.1.1 所 示 。 只 
要 你 按照 本 章 所 示 的 步骤 操作 ， 任 何人 都 可 
以 在 浏览 硕 中 访问 这 个 域名 。 


Enter 3 Goman name or koyword to search 


图 21.1.1 只 有 特定 的 公司 才 是 可 信和 的 域名 注册 
商 〈 这 个 界面 和 下 面 的 界面 均 来 自 Namecheap ) 。 
你 可 以 使 用 其 中 的 一 个 查询 你 想 使 用 的 域名 是 否 可 
用 ， 也 可 以 通过 Web 主机 提供 商 的 网 站 进行 检查 














区 catalancats 





获得 域名 的 步 又 

(1) 在 训 览 夯 中 访问 茶 个 域名 注册 商 ， 碍 
看 你 想 用 的 域名 是 否 可 用 ， 如 图 21.1.2 所 示 。 
(并 参见 第 一 条 提示 。 ) 如 今 ， 要 想 找 一 个 
还 未 被 使 用 的 名 字 非 常 不 容易 ， 因 此 你 有 必 
要 搜索 一 下 你 喜欢 的 名 字 的 变 体 。 











g 
e 
全 
如 
5 
加 


catalancats.com Available 


夯 


catalancats.net Available 


catalancats.biz Available 


catalancats.org Available 


回回 | 口 


catalancats.pw Available 


catalancats.co Available 
catalancats.co.uk Available 
catalancats.in Available 
catalancats.us Available 
catalancats.me Available 
catalancats.info Available 
catalancats.us.com Available 
catalancats.ca Available 
catalancats,.mobi Available 


catalancats.com.au Available 


口 
加 
加 
回 
口 
加 
加 
加 
加 
四 
回 


Available 


Add to Cart 
Wh 


图 21.1.2 ”如 果 域 名 是 可 用 的 ， 就 可 以 通过 第 三 方 
注册 商 网 站 或 者 Web 主机 提供 商 进 行 注 册 ( 从 图 
中 可 以 看 到 ，catalancats.com 这 个 域名 是 可 用 的 ) 


catalancats.es 
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(2) 一 旦 找到 一 个 域名 ， 便 可 以 注册 了 。 
不 同 域名 注册 商 的 价格 不 一 样 ， 不 过 .com 域 
名 的 价格 通常 大 约 为 每 年 10 美元 ( 其 他 类 型 
的 域名 的 价格 可 能 不 一 梓 ) 。 


Namecheap (www.namecheap.com ) 


和 Hover (www.hover.com ) 只 是 可 以 注册 域 
名 的 网 站 中 的 两 个 (没有 要 求 必 须 使 用 它们 )。 
通过 搜索 “domain registrars”【( 域名 注册 商 ) 
可 以 找到 其 他 一 些 类 似 的 网 站 。 此 外 ， 很 多 
Web 主机 提供 商 也 提供 域名 注册 服务 ; 反 过 
来 ， 很 多 域名 注册 商 也 提供 主机 服务 。 域 名 
注册 和 主机 托管 可 以 使 用 不 同 的 提供 商 ， 很 
多 人 都 这 样 做 。 


要 让 网 站 在 别人 访问 URL 时 显示 出 
来 ， 需 要 先进 行 一 些 重要 的 配置 ， 这 些 内 容 参 
见 下 一 节 的 补充 材料 “连接 域名 和 Web 主机 ”。 


21.2 为 网 站 寻找 主机 


Web 主机 提供 商 可 以 提供 其 服务 器 上 的 
一 部 分 空间 ， 存 放 你 的 网 站 文件 ， 同 时 提供 
其 他 相关 的 服务 ， 如 创建 同 域名 关联 的 电子 
邮件 地 址 (如 yourname@yourdomain.com ) 。 

有 很 多 公司 都 提供 网 站 托管 服务 。 其 中 ， 
大 部 分 公司 根据 其 服务 的 内 容 按 月 收取 费用 。 
有 的 公司 提供 免费 的 网 站 托管 服务 ， 但 要 求 
在 你 的 网 站 上 放置 他 们 的 广告 (一 般 不 推 存 
这 种 方法 ) 。 

尽管 你 可 以 在 互联 网 上 搜索 Web 主机 提 
供 商 ,但 还 是 推荐 你 问 使 用 菜 种 主机 的 朋友 
进行 咨询 一 一 抑或 某 位 值得 信赖 的 博 主 提 到 
的 他 所 用 的 主机 的 提供 商 。 另 外 ， 登 记 一 下 
网 站 的 页 脚 和 附注 栏 。 

考虑 主机 提供 商 时 ， 除 了 价格 之 外 ， 还 
要 考虑 以 下 几 件 事件 。 

















口 他 们 允许 一 个 主机 使 用 多 个 域名 吗 ? 
是 否 需 要 为 每 个 网 站 支付 额外 的 费 
用 ?如 果 你 希望 目 己 的 网 站 未 来 发 展 
得 很 好 ， 就 应 该 寻找 可 以 使 用 多 个 域 
名 的 主机 。 

口 他 们 人 允许 网 站 使 用 多 大 的 磁盘 空间 ? 
不 要 为 超出 需要 的 部 分 付费 。 话 虽 如 
此 ， 通 常 连 最 基本 的 账户 也 拥有 足够 
的 空间 。 记 住 ，HTML 文件 占用 的 空 
则 非常 小 ， 而 图 像 、 音 频 和 视频 文件 
则 依次 占用 更 大 的 空间 ,如 果 有 必要 ， 
使 用 一 段 时 间 后 ， 你 总 是 能 够 升级 到 
拥有 更 多 空间 的 账户 。 

口 他 们 允许 每 个 月 使 用 多 大 的 数据 传输 
量 ( 带 需 )。 这 个 值 代表 的 是 发 送 给 
访问 者 的 数据 (包括 HTML、CSS、 
图 像 、 媒 体 文件 等 ) 的 总 大 小 ， 而 不 
是 允许 在 服务 硕 存 储 的 空间 的 大 小 。 
因此 ， 如 果 你 预计 访问 者 会 从 你 的 网 
站 访问 大 量 的 大 文件 ， 就 需要 更 大 的 
月 传输 配额 。 关于 这 一 点 , 通常 来 说 ， 
网 站 刚 起 步 时 ， 最 基本 的 账户 就 能 满 
足 需求 ， 将 来 可 以 视 情 况 再 升级 。 

口 可 以 使 用 域名 创建 多 少 邮 箱 〈 主机 提 
供 商 通常 提供 很 多 个 。) 

口 他 们 有 应 对 大 访问 量 、 防 止 网 站 朋 演 
的 措施 吗 ? 

口 他 们 提供 哪 种 技术 支持 ?是 通过 电话 、 
邮件 、 还 是 在 线 交 谈 ， 他 们 啊 应 请 求 
需要 多 长 时 间 ， 他 们 的 网 站 上 有 大 量 
的 文 持 信息 吗 ? 〈 在 成 为 他 们 的 客户 
之 前 ， 可 以 检查 这 些 内 容 的 数量 。 ) 

口 他 们 多 入 备份 一 次 服务 硕 上 的 数据 ( 以 
防 出 现 问题 ) ? 

口 可 以 使 用 哪些 服务 需 问 语言 和 软件 
包 ? 多 数 至 少 会 提供 PHP、MYySQL， 
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还 有 一 些 会 提供 WordPress 或 其 他 高 
级 特性 。 有 些 特性 需要 更 昂贵 的 付费 





要 实现 这 一 步 ， 需要 对 你 的 域名 配置 


方案 。 


将 ISP 作为 Web 主机 提供 商 
如 果 你 可 以 访问 互联 网 ， 就 可 能 已 经 
通过 你 的 ISP ( Internet Service Provider ) 获 
得 了 少量 的 Web 空间 。 它 可 能 难以 存放 束 
个 网 站 ， 但 放 几 个 页 面倒 是 足够 。 可 以 向 
你 的 ISP 询问 详细 信息 。 
FI 

人 
可 以 使 用 www.someisp.com/your-site/， 但 

能 使 用 www.yourdomain.com。 因 此 ， 如 
果 你 布 望 建设 的 是 专业 的 网 站 ， 就 不 要 使 
用 ISP 提供 的 免费 空间 行 放 网 站 。 


Web 分 析 

WE 人 人 
人 访问 过 你 的 网 站 ， 他 们 使 用 了 哪些 浏览 
器 ， 哪 些 页 面 是 最 受 欢 迎 的 ， 以 及 很 多 其 
他 有 用 的 数据 。 

你 所 用 的 Web 主机 有 可 能 提供 这 些 信 
息 ， 但 如 果 你 希望 获得 更 为 丰富 的 信息 ， 
可 以 使 用 Google Analytics 或 类 似 的 服务 。 
该 工具 很 容易 添加 到 网 站 ， 只 要 在 每 个 页 
面 中 添加 一 小 段 代码 就 可 以 了 。 更 多 信息 
参见 www.google.com/analytics/。 


连接 域名 和 Web 主机 

注册 了 域名 ， 找 到 了 Web 主 机 之 后 ， 
下 面 很 重要 的 一 步 就 是 将 二 者 结合 到 一 起 : 
你 必须 将 你 的 域名 指向 你 的 Web 主机 ,这 样 ， 
访问 者 输入 网 站 的 URL 时 网 站 才能 加 载 。 


域名 服务 器 。Web 主机 提供 商会 提供 用 于 
这 项 配置 的 域名 服务 器 信息 。 

根据 注册 域名 的 方式 (参见 21.1 节 ) 
的 不 同 ， 实 际 的 配置 是 在 以 下 两 个 地 方 中 
的 一 个 进行 的 。 如 果 域 名 是 通过 域名 注册 
商 注 册 的 ， 中 对 应 的 账户 ， 为 域 
名 设置 域名 服务 器 信息 (域名 注册 商会 提 
供 操作 说 明 ) 。 如 果 域 名 是 通过 Web 主机 
提供 商 注册 的 ， 可 以 登录 到 对 应 的 账户 ， 
更 新 设置 。 

如 果 这 些 内 容 让 你 感到 有 些 疑 惑 ， 也 
不 必 担 心 。Web oe a 
会 提供 操作 上 的 说 明 ， 通 常 ， 如 果 需 要 ， 
他 们 还 能 提供 手把手 的 帮助 。 

需要 记 住 的 是 ， 当 你 修改 域名 服务 器 
设置 时 ， 通常 需要 24 至 48 小 时 (最 多 72 
小 时 ) 的 时 间 ， 相 应 的 更 新 才能 传播 到 整 
个 万 维 网 。 不 过 ， 这 种 改变 不 会 在 所 有 的 
地 方 同时 发 生 。 因此 ， 如 果 你 更 新 了 域名 
服务 器 信息 (并 按照 21.3 节 的 说 明 上 传 了 
网 站 的 文件 ) ， 你 的 朋友 可 能 已 经 可 以 在 
他 所 在 的 地 方正 常 访 问 网 站 了 ， 而 你 却 无 
法 立即 看 到 网 站 (也 可 能 是 相反 的 情况 ) 。 
你 的 网 站 应 该 在 不 久之 后 就 能 让 所 有 人 都 
看 到 。 


21.3 将 文件 传送 至 服务 器 


为 了 让 互联 网 上 的 人 们 看 到 你 的 页 面 
你 需要 将 页 面 上 传 到 Web 主机 服务 需 一 种 
价 单 的 方法 就 是 使 用 FileZilla ( http:Wfilezilla- 
project.org ) 这 样 的 FTP 客户 闹 。FileZilla 是 
一 球 自 由 软件 ， 可 以 运行 在 Windows、Mac 
OS X 和 Linux 上 (关于 其 他 的 FTP 客户 站 ， 
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参见 提示 )。 很 多 网 页 编辑 器 也 包含 FTP 功 能 ， 
从 而 可 以 在 编辑 器 中 发 布 页 面 ， 而 不 必 使 用 
FileZilla 这 样 的 程序 。 

通常 ， 你 的 Web 主机 提供 商会 在 你 注册 
托管 账户 之 后 通过 电子 邮件 向 你 发 送 FTP 连 
接 信 息 。( 如 果 你 没有 收 到 , 可 以 联系 他 们 。 ) 
一 有 旦 获得 这 些 信 息 ， 就 可 以 配置 服务 关连 
接 ， 并 将 该 配置 保存 在 一 个 名 称 下 面 ， 如 
图 21.3.1、 图 21.3.2 和 图 21.3.3 所 示 ， 从 而 在 
以 后 想 要 发 布 文件 (或 从 服务 器 上 下 载 文件 ) 
的 时 候 可 以 方便 地 访问 服务 融 。 








Edit View Transfer Server Bookmar 


LU 
Copy current connection to Site Manager... 


New tab 上:: 
Close tab Ei 


Export... 
Import... 





Show files currently being edited... 


21.3.1 如 果 要 在 FileZilla 中 输入 新 的 服务 器 
信息 ， 从 主 窗口 中 选择 File 一 Site Manager ( 文件 
一 站 点 管理 名 ) 。Site Manager 是 为 每 个 站 点 配置 
FTP 连接 信息 的 地 方 





| General | Advanced Transfer Sentlng5 Charset 
E My Sies 一 一 一 一 一 一- 3 “上 -一举 


tos  [ Port 


3 some other site Protoco!: FTP - File Transfer Protocol 
a some site 




















21.3.2 在 Site Manager 中 点 击 New Site ( 新 站 
点 ) 按钮 ，My Sites (我 的 站 点 ) 下 面 就 会 出 现 一 
个 临时 的 名 称 
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Select Entry; 
。 | Ceneral | Advanced ”Transfer Seting5 Charset 
ET My Sites < 一 一 一 一 一 一 一 -一 一 一 一 


EDETTCTE 
3 some other site Protocol: | FTP - File Transfer Protocol 
Eneryption. | Use plain FTP 


[hp.caralancats ,com | Port- 





2 some site 

















21.3.3 使 用 你 选择 的 名 称 蔡 换 临 时 名 称 ， 再 
在 General ( 常规 ) 标签 页 中 配置 连接 信息 。 点 击 
Connect (连接 ) 按钮 ， 会 保存 这 些 信 息 并 立即 建 
立 与 服务 需 之 间 的 连接 。 点 击 OK (确定 ) 按钮 ， 
则 仅 会 保存 信息 


接 下 来 ， 连 接 到 服务 硕 〈 如 图 21.3.4 所 
示 ) 和 传输 文件 (如 图 21.3.5 和 图 21.3.6 所 示 ) 
的 操作 就 相当 人 简单 了 。 

注意 ，FileZilla 在 Mac OS 和 Windows 上 
的 外 观 有 些 不 同 , 但 其 界面 是 非常 相似 的 ( 截 
图 来 自 不 同 的 操作 系统 )。 除 非特 别 指 出 ， 
以 下 使 用 步骤 对 两 个 版 本 来 说 都 是 相同 的 。 




















21.3.4” 当 站 点 的 连接 信息 保存 到 Site Manager 
之 后 ， 就 可 以 在 不 重复 输入 的 情况 下 直接 连接 到 
Web 主机 的 FTP 服务 机。 在 Mac 或 Windows 上 ， 
通过 这 里 显示 的 服务 右 图 标 回 到 Site Manager (也 
可 以 通过 图 21.3.1 中 的 沫 单 ) 。 在 Windows 上 ， 
就 像 这 里 底部 图 像 显 示 的 ， 可 以 激活 辐 下 的 箭头 ， 
再 从 弹出 的 下 拉 沫 单 中 选择 站 点 名 称 
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发 布 网 站 





R Empty directory listin 
党 Add files to queue 


Enter directory 


Open 
Edit 


index.html 


Create directory 
Refresh 


Delete 
Rename 








Selected 1 directory. 


21.3.5 在 窗口 左 侧 ， 定 位 到 你 的 计算 机 上 包含 
要 上 传 的 文件 的 目录 。 在 窗口 右 侧 ， 选 择 服务 器 的 
目标 目录 。 再 在 要 上 传 至 服务 器 的 文件 或 文件 夹 上 
点 击 鼠 标 右键 ， 选 择 Upload ( 上传 ) 

















index.html 








21.3.6 ”新 上 传 的 文件 夹 出 现在 窗口 右 侧 的 框 
内 。 对 所 有 要 传送 至 服务 页 的 文件 和 文件 夹 执行 相 
同 的 操作 。 如 果 要 一 次 性 上 传 多 个 文件 和 文件 夹 ， 
可 以 多 选中 这 些 文件 和 文件 夹 ， 再 点 击 鼠 标 右键 并 
选择 Upload 





1. 定义 新 的 FTP 站 点 的 属性 

( 在 FileZilla 的 主 菜 单 中 选择 File 一 
Site Manager( 如 图 21.3.1 所 示 ) ， 或 者 点 击 
服务 器 图 标 ( 如 图 21.3.4 所 示 ) ， 显 示 Site 
Manager 窗口 。 

(2) 在 Site Manager 窗口 中 ， 点 击 New 
Site〈 新 站 点 ) 按钮 (如 图 21.3.2 所 示 ) 。 

(3) 输入 站 点 名 称 ( 蔡 换 临时 名 称 ) 。 
这 个 名 称 不 必 与 域名 相同 ， 它 只 是 一 个 标 
签 。 根 据 你 的 Web 主机 提供 疝 的 说 明 ， 填 写 
General 标签 页 下 各 字段 的 信息 。 通 常 ， 至 少 
需要 输入 主机 URL ,在 Logon Type( 登录 类 型 ) 
中 选择 Normal( 常规 ), 输入 用 户 名 和 密码 ( 通 
常 在 建立 账号 时 创建 ) ， 如 图 21.3.3 所 示 。 











(4) 输 完 连接 信息 之 后 ， 点 击 Connect 按 
钮 保存 信息 并 立即 连接 到 服务 需 ， 或 者 点 击 
OK 按钮 保存 信息 供 以 后 连接 用 ， 如 图 21.3.3 
所 示 。 





2. 使 用 FileZilla 将 文件 传送 至 服务 器 

(1) 打开 FileZilla。 

(2) 选择 最 左 问 的 服务 带 图 标 ( 如 
图 21.3.4 所 示 ) ， 显 示 Site Manager 窗口 。 
下 在 弹出 的 下 拉 采 单 中 选择 你 的 站 点 名 称 ， 
点 击 Connect 按钮 (Windows 版 有 捷径 ， 如 
图 21.3.4 所 示 ) 。FileZilla 就 会 建立 与 服务 器 
的 连接 。 

(3) 在 窗口 的 右 侧 ， 定 位 到 要 上 传 文件 的 
服务 问 目 录 。 

(4) 在 窗口 的 左 侧 ， 定 位 到 你 的 计算 机 上 
存放 要 上 传 的 文件 的 目录 。 

(5) 在 左 侧 框 右 击 目 标 文件 或 者 文件 来， 
再 在 弹出 的 菜单 中 选择 Upload ( 如 图 21.3.5 
所 示 ) ， 文 件 就 会 进行 传输 ， 如 图 21.3.6 所 
示 (〈 对 于 视频 等 大 文件 ， 这 一 过 程 所 需要 的 
时 间 会 长 一 些 ) 。 还 可 以 反 过 来 传输 文件 ( 参 
见 第 一 条 提示 ) 。 也 可 以 从 一 问 将 文件 拖 放 
到 另 一 端 ， 而 不 用 右 击 的 办 法 。 

(6) 你 对 站 点 的 更 新 现在 已 经 能 在 线 上 
看 到 了 。 通 过 www.yourdomain.tldq ( 这 里 的 
yourdomain.tld 是 你 注册 的 域名 ; 其 中 ， .td 是 
顶级 域名 ， 一般 为 .com， 但 也 可 以 注册 使 用 
其 他 扩展 名 的 域名 ) 访问 你 的 站 点 ， 确 保 一 
切 都 是 正常 的 。 如 末 需 要 ， 编 辑 你 的 计算 机 
上 的 文件 ， 再 按照 第 (3) 步 至 第 (5) 步 的 说 明 
将 它们 上 传 至 服务 融 ( 如 果 过 去 了 很 长 时 间 ， 
则 还 需 执行 第 (2) 步 ) 。 重 复 这 一 步 ， 直 到 网 
站 完全 符合 你 的 预期 。 

(7) 完成 文件 传输 之 后 , 可 以 关闭 FileZilla 
或 在 主 亲 单 中 选择 Server 一 Disconnect ( 服务 
售 一 靳 开 连 接 ) ， 如 图 21.3.7 所 示 。 
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eT Eookmarks Window 


Cancel cuUrrent orerathon 


Reconnect 
Disconnect | 


Search remoate files... 
Enter custom command... 
Force showing hidden files 


图 21.3.7 ”完成 之 后 ， 





选择 Server 一 Disconnect 


还 可 以 将 文件 从 网 站 服务 器 传 至 你 的 
计算 机 。 要 实现 这 一 步 ， 只 需要 右键 单 击 右 
侧 框 中 的 文件 或 文件 夹 (如 图 21.3.5 所 示 ) ， 
再 在 弹出 的 菜单 中 选择 Download ( 下载 ) 。 


FileZilla 只 是 众多 FTP 客户 端 中 的 一 
个 。CyberDuck ( 自由 软件 ，http://cyberduck. 
ch) 在 OSX 和 Windows 上 均 可 用 , OSX 
上 的 流行 软件 还 有 Transmit (www.panic. 
comy/transmit ) 和 Fetch ee 
com) 。OSX 还 有 内 置 的 FTP 功能 ( 参 
见 http://osxdaily.com/2011/02/07/ftp-from- 
mac/ ) 。 在 网 上 搜索 “FTP client”( FTP 客 户 端 ) 
可 以 找到 更 多 的 可 以 运行 在 Windows 和 OS X 


上 的 软件 。 它 们 的 工作 方式 是 相似 的 ， 只 是 
有 的 软件 功能 多 一 些 ， 有 的 少 一 些 。 
传输 文件 和 文件 夹 时 ， 它 们 是 被 复制 


人 原 米 的 位 置 还 保留 它们 的 


原始 版 本 。 


图 灵 社 
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如 果 目 标 位 置 已 经 存在 要 传输 的 文件 
或 文件 夹 , 那么 FTP 程序 可 能 会 弹出 对 话 框 ， 
确认 是 否 要 履 姜 (FileZilla 就 会 这 样 做 ) 。 不 
过 ， 每 个 FTP 客户 端 都 不 相同 ， 因 此 有 的 软 
件 也 可 能 不 经 确认 而 直接 覆盖 。 可 以 试 着 传 
0 了 解 你 的 FITP 客 尸 端 是 如 何 
处 理 这 类 情形 的 。 


提 示 


代码 中 的 相对 URL 在 文件 夹 传 至 服 


如 果 访 问 网 站 的 URL 时 网 站 无 法 显 
能 有 多 种 原因 。 首 先 ， 再 次 检查 是 否 
已 将 文件 传 至 正确 的 目录 。 通 常 ， 页面 应 位 
于 public_html、 www 或 其 他 类 似 名 称 的 目录 
下 。 你 的 Web 主机 提供 商 的 操作 说 明 中 应 该 
和 明了 正确 的 位 置 ， 如 果 不 确定 ， 可 以 向 他 
们 咨询 。 如 果 文 件 都 放 在 正确 的 位 置 而 网 站 
依然 无 法 显示 ， 问 题 就 可 能 出 在 域名 服务 器 
设置 上 (参见 21.2 节 补 充 材 料 “ 连 接 域名 和 
Web 主机 ” ) 。 


提 示 


如 果 将 某 文 件 的 新 版 本 上 传 至 服务 器 
ee 可 以 清除 浏览 
器 的 缓存 ， 并 再 次 检查 页 面 。 如 果 不 清 楚 如 

除 缓存 ， 可 以 搜索 浏览 器 的 帮助 文档 。 


= 
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HTML 参考 


本 附录 收录 了 几乎 所 有 的 HIML 元 系 和 
属性 , 包括 一 些 本 书 未 作 介绍 的 元 素 和 属性 。 
(大 多 数 情 况 下 ， 没 有 介绍 它们 是 因为 使 用 频 
率 很 低 或 者 是 高 级 特性 。) 每 个 元 素 都 有 简单 
的 描述 ， 元 素 后 面 还 列 出 了 与 其 相关 联 的 属 
性 。 





























“参考 莉 广 ”一 列 标 出 了 本 书 介 绍 对 应 
元 素 或 属性 的 章节 ， 方 便 查 阅 。 有 时 ， 某 个 
属性 的 董 市 可 能 对 应 的 是 对 为 一 个 元 系 的 介 
绍 ， 这 意味 看 对 该 属性 的 介绍 适用 于 所 有 可 
用 的 元 系 。 

此 外 ， 有 一 些 条 目 有 以 下 标识 : 




















D (3)，HTMLS5 新 增 的 元 素 或 属性 ; 
口 (*)， 在 HTML5 之 前 的 HTML 中 就 已 
存在 ,但 HTMLS5 对 其 重新 进行 了 定义 。 
HTMLS 的 一 些 新 特性 是 旧 的 浏览 硕 〈 如 
IE8 ) 所 不 文 持 的 。 关 于 最 新 的 浏览 硕 文 持 情 
况 ， 参 见 http://caniuse.com， 该 网 站 一 直 在 不 
苯 更 新 中 。 








随时 查阅 
CSS 引用 和 HTML 参考 都 可 以 在 本 书 的 
配套 网 站 上 找到 ( 见 www.htmlcssvqs.com ) 。 





表 A.1 HTML 元 素 和 属性 
元 素 /属性 描述 参考 章节 
绝 大 多 数 HTML 元 素 下 列 属性 适用 于 绝 大 多 数 HTML 元 素 
accesskey 用 于 为 元 素 添 加 键盘 快捷 键 
aria-* 用 于 关联 由 WAI-ARIA 指定 的 可 访问 性 属性 值 165 
class 用 于 标识 一 组 元 素 ， 以 便 为 它们 应 用 样式 3.14 





contenteditable (5) 











用 于 让 元 系 的 内 容 变 成 可 编辑 的 




















data* (5) 用 于 存储 页 面 或 应 用 特有 的 定制 化 数据 

dir 用 于 指定 元 素 的 文字 方 回 4.18 
draggable (5) 用 于 让 元 素 变 成 可 拖 搜 的 

dropzone (5) 用 于 将 元 素 标 记 为 可 拖 搜 元 素 可 以 放下 的 区 域 

hidden (5) 用 于 指示 元 素 还 不 是 相关 的 或 不 青 是 相关 的 

id 用 于 标识 特定 的 元 素 ， 以 便 为 其 添加 链接 ， 应 用 样式 或 使 用 3.14 


JavaScript 编写 脚本 
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元 素 / 属性 


lang 

role 
spellcheck (5) 
style 
tabindex 


title 


href 

href lang (5) 

download (5) 

rel 

target (*) 

type 
abbr (*) 
address 
area 

alt 

coords 

href 

href lang (5) 

download (5) 

rel 

shape 

target (*) 
article (5) 
aside (5) 
audio (5) 

autoplay (5) 

controls (9) 

loop (5) 

muted (5) 

preload (5) 


src (9) 
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用 于 指定 元 素 的 书写 语言 

用 于 为 辅助 设备 提供 关于 元 素 角 色 的 额外 信息 (由 WAI-ARIA 定义 ) 
用 于 指示 是 否 应 该 对 元 素 的 内 容 进 行 拼写 和 语法 检查 

用 于 添加 本 地 样式 表 信 息 

用 于 定义 访问 者 使 用 制 表 键 时 在 元 素 之 间 移 动 的 顺序 

用 于 为 元 素 添 加 工具 提示 

用 于 创建 链接 和 销 

用 指 于 定 链 接 到 的 页 面 的 URL 或 销 的 名 称 

用 于 指定 所 链接 的 资源 的 语言 

用 来 指定 指向 下 载 资 源 的 链接 ， 将 download 值 设置 为 文件 名 
用 于 标识 链接 的 性 质 

用 于 指定 链接 应 打开 的 窗口 或 框架 

用 于 指定 资源 的 MIME 类 型 

用 于 解释 缩写 或 首 字母 缩写 的 含义 

用 于 为 最 近 的 article 或 body 元 素 祖 先 标 识 联系 人 信息 

用 于 指定 图 像 映射 的 坐标 

用 于 给 出 关于 区 域 的 信息 

用 于 给 出 图 像 映射 中 区 域 的 坐标 

用 于 指定 图 像 映射 中 区 域 链接 的 目标 URL 

用 于 指定 所 链接 的 资源 的 语言 

用 于 指定 指向 下 载 资源 的 链接 。 应 该 将 download 值 设 置 为 文件 名 
用 于 标识 链接 的 种 类 

用 于 指定 图 像 映射 中 区 域 的 形状 

用 于 指定 链接 应 打开 的 窗口 或 框架 

用 于 标识 页 面 中 的 独立 成 分 ， 原 则 上 是 可 独立 分 发 或 可 再 用 的 
用 于 标识 页 面 中 的 一 个 区 域 ， 其 内 容 与 周围 的 内 容 无 天 

用 于 在 页 面 中 能 入 音频 

用 于 告诉 浏览 器 在 它 能 播放 音频 文件 时 立即 开始 播放 

用 于 告诉 浏览 器 为 音频 元 素 提供 控件 

用 于 告诉 音频 文件 在 播放 到 末尾 后 不 间断 地 继续 从 头 播 放 

用 于 控制 音频 输出 的 默认 状态 

2 
入 

用 于 标识 要 播放 的 音频 文件 的 URL 


用 于 标识 出 于 实用 的 目的 提醒 读者 注意 的 一 块 文本 ， 不 传达 任何 客 
外 的 重要 性 ， 也 不 表示 其 他 的 语 态 和 语气 


用 于 指定 页 面 的 基准 URL 
用 于 指定 用 于 生成 相对 URL 的 URL 
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0.1 
3.8 
3.10 
17.10 
17.11 
17.10 
17.11 


17.11 


17.10 
4.3 
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元 素 /属性 

target (*) 

bdi (5) 
dir 

bdo (5) 
dir 

blockquote 
cite 

body 

br 

button 
autofocus (5) 
disabled 
form (5) 
formaction (9) 
formenctype (5) 
formmethod (5) 
formnovalidate (5) 
formtarget (5) 


Name 


type 
value 
canvas (9) 
width, height (9) 
caption 
cite 
code 
col 
span 
colgroup 
span 


datalist (5) 


dd 

del 
cite 
datetime 


details (5) 


描 述 
用 于 指定 页 面 上 链接 的 默认 目标 
用 于 标识 独立 于 周围 文本 的 用 做 双向 文本 格式 化 的 一 块 文本 
用 于 指定 文本 方 回 
用 于 显 式 地 格式 化 其 内 容 的 文本 方向 
用 于 指定 文本 方 回 
用 于 指定 页 面 上 的 一 段 引 述 文本 
用 于 给 出 来 源 的 URL 
用 于 包围 页 面 的 主要 内 容 区 域 
用 于 创建 换行 
用 于 创建 按钮 
用 于 指定 按钮 在 页 面 加 载 时 立即 获得 焦点 
用 于 指示 元 素 在 当前 状态 下 是 不 可 用 的 
用 于 将 元 素 同 另外 一 个 不 包含 该 元 素 的 表单 关联 起 来 
用 于 窗 盖 表单 的 action 属性 
用 于 窗 盖 表单 的 enctype 属性 
用 于 窗 盖 表单 的 method 属性 
用 于 窗 盖 表单 的 novalidate 属性 
用 于 窗 盖 表单 的 target 属性 


用 于 标识 使 用 按钮 发 送 的 数据 ， 或 者 用 于 标识 按钮 本 喘 〈 或许 是 为 
了 使 用 某 项 JavaScript 功能 ) 


用 于 在 表单 元 素 中 使 用 按钮 

用 于 指定 在 点 击 按钮 时 应 该 提交 的 数据 
提供 用 于 生成 依赖 于 分 辩 率 的 位 图 画布 的 脚本 ， 以 在 线 呈 现 图 像 
用 于 指定 画布 的 尺寸 

用 于 创建 表格 的 标题 

用 于 将 文本 标记 为 引述 

用 于 将 文本 标记 为 计算 机 代码 

用 于 把 表格 中 的 列 组 合成 非 结 构 化 组 
用 于 指定 列 组 中 的 列 数 

用 于 把 表格 中 的 列 组 合成 结构 化 列 组 
用 于 指定 列 组 中 的 列 数 


包含 一 组 选项 元 素 ， 这 些 元 素 是 代表 为 一 表单 控件 的 一 套 预 定义 的 
选项 


用 于 标记 列表 中 的 定义 

用 于 标记 删除 了 的 文本 

用 于 引用 对 修订 进行 解释 的 URL 

用 于 指定 修订 的 时 间 和 日 期 

用 于 创建 公开 的 小 部 件 ， 访 问 者 可 以 通过 它 获 取 额 外 的 信息 或 控制 
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lO. 


[em be 


16.15 
L013 
17.14 


18.1 
4.5 
4.13 


4.12 


15.8 
4.12 
4.12 
4.7 


元 素 /属性 
open (5) 
dfn 
title 
div 
dl 
dt 
em (*) 
embed (*) 
SIC 
type 
width, height 
fieldset 
disabled (5) 
form (5) 
figcaption (5) 
figure (5) 


footer (5) 

form 
accept-charset 
action 


autocomplete (5) 


enctype 
method 

name 
novalidate (5) 
target (*) 


hi, h2, h3, h4, h5, h6 


head 


header (5) 

hr (*) 

html 
manifest (5) 


i (*) 


iframe 


Name 


附录 A HTML 参考 401 


描 述 
用 于 指定 元 素 在 默认 情况 下 是 打开 的 还 是 关闭 的 
用 于 指定 列表 项 目的 定义 实例 
用 于 提供 术语 的 定义 
用 于 将 页 面 切割 为 块 级 区 域 
用 于 创建 描述 列表 
用 于 标记 要 在 列表 中 定义 的 术语 
用 于 标记 要 强调 的 文本 
用 于 添加 多 媒体 
用 于 指定 多 媒体 文件 的 URL 
用 于 标识 多 媒体 文件 的 MIME 类 型 
用 于 指定 舱 入 的 多 媒体 播放 器 的 尺寸 
用 于 将 一 套 表单 元 素 组 合 在 一 起 
用 于 将 表单 元 素 组 内 的 所 有 表单 控件 设 为 不 可 用 的 
用 于 将 元 素 同 另外 一 个 不 包含 该 元 素 的 表单 关联 起 来 
用 于 为 其 父 元 素 figure 的 内 容 提供 标题 或 说 明文 字 


用 于 识别 在 主 文档 流 内 被 引用 ,但 在 不 影响 文档 流 的 情况 下 可 以 移 
至 他 处 的 内 容 


用 于 识别 最 近 的 祖先 元 素 body、section、article 或 aside 的 页 脚 
用 于 指定 表单 ， 表 单 用 于 收集 要 提交 的 数据 

用 于 识别 要 在 提交 表单 时 使 用 的 字符 编码 ( 默认 为 页 面 的 字符 集 ) 
用 于 给 出 处 理 表 单数 据 的 脚本 的 URL 

当 该 属性 设 为 off 时 ， 用 于 阻止 浏览 器 提供 或 记 住 目 动 完成 值 ( 默 
认为 on， 即 在 默认 情况 下 允许 自动 完成 ) 

用 于 确保 文件 以 正确 的 编码 格式 发 送 至 服务 需 

用 于 指定 数据 应 如 何 发 送 至 服务 需 

用 于 为 表单 提供 名 称 ， 供 以 后 使 用 

用 于 人 允许 表单 在 不 验证 的 情况 下 提交 

用 于 识别 表单 提交 的 目标 窗口 或 iframe 

用 于 创建 标题 


用 于 创建 head 部 分 ， 该 部 分 包含 关于 页 面 的 信息 ， 包 括 标题 、 制 
作者 、 关 键 子 、 样 式 表 和 脚本 


用 于 识别 一 组 介绍 性 内 容 或 导航 帮助 

用 于 标识 段落 级 的 主题 变化 

用 于 标识 作为 HTML 文档 的 文本 文档 
用 于 指定 离线 时 使 用 的 应 用 程序 缓存 清单 


用 于 标记 用 另外 一 种 语 态 和 语气 ， 或 不 同 于 常规 方式 陈述 以 表现 不 
同 特 质 的 一 块 文字 


用 于 加 载 艇 套 在 男 一 个 网 页 中 的 网 页 
用 于 指定 作为 目标 的 iframe 的 名 称 
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16.4 
16.16 


4.4 
4.4 


3.11 
16.2 


16.2 
16.5 


16.13 
16.2 
16.2 
16.2 
6.1 
3.3 
| 


3.5 


3.] 


4.3 


402 


元 素 /属性 
sandbox (5) 
seamless (5) 

SIC 

srcdoc (5) 
width, height 
img 


alt 


ismap 


SITC 
Usemap 


width, height 


input 


accept 
alt 
autocomplete (5) 


autofocus (5) 
checked 
dirname (5) 
disabled 

form (5) 
formaction (9) 
formenctype (5) 
formmethod (5) 
formnovalidate (5) 
formtarget (5) 
list (5) 

max, min (5) 
maxlength 
multiple (5) 
name 
pattern (5) 
placeholder (5) 
readonly 


required (5) 


附录 A HTML 参考 


描 述 
用 于 出 于 安全 目的 ， 为 iframe 的 内 容 指 定额 外 的 限制 
用 于 指定 iframe 是 否 显 示 为 包含 它 的 页 面 的 一 部 分 
用 于 指定 初始 页 面 的 URL 
用 于 指定 初始 页 面 的 URL 
用 于 指定 iframe 的 尺寸 
用 于 在 页 面 中 插入 图 像 


用 于 提供 蔡 代 文本 。 当 图 像 无 法 显示 时 ， 则 显示 蔡 代 文本 ; 替代 文 
本 也 是 为 使 用 辅助 设备 的 用 户 提供 的 


用 于 指示 该 元 素 可 以 提供 对 服务 表 问 的 图 像 映 射 〈 该 元 素 必须 是 a 
元 素 的 后 代 ) 的 访问 


用 于 指定 图 像 的 URL 
用 于 指定 应 同 引用 图 像 一 起 使 用 的 客户 端 图 像 映 射 


用 于 指定 图 像 的 尺寸 ， 从 而 让 页 面 的 加 载 更 快 ， 或 出 于 对 图 像 进 行 
缩放 的 目的 


用 于 创建 表单 元 素 

当 输入 框 类 型 为 fle 时 ， 用 于 癌 浏览 器 告知 需要 接受 的 文件 类 型 
当 输 入 框 类 型 为 image 时 ， 用 于 提供 替换 文本 

当 该 属性 设 为 of 时 ， 用 于 阻止 浏览 器 提供 或 记 住 自动 完成 值 ( 默 
认为 on， 即 在 默认 情况 下 允许 自动 完成 ) 

用 于 指定 输入 框 在 页 面 加 载 时 立即 获得 焦点 

用 于 标记 单 选 按钮 或 复 选 框 在 默认 情况 下 被 选中 

用 于 标识 输入 的 文本 的 方向 

用 于 指示 输入 框 在 当前 状态 下 是 不 可 用 的 

用 于 将 元 素 同 另外 一 个 不 包含 该 元 素 的 表单 关联 起 来 
用 于 履 盖 表单 的 action 属性 

用 于 窗 盖 表单 的 enctype 属性 

用 于 窗 关 表 单 的 method 属性 

用 于 履 盖 表单 的 novalidate 属性 

用 于 履 盖 表单 的 target 属性 

用 于 将 输入 框 与 数据 列表 关联 起 来 

用 于 指示 输入 框 元 素 允 许 的 值 的 范围 

用 于 指定 可 输入 到 输入 框 元 素 的 字符 的 最 大 数量 

用 于 指定 是 否 允 许 用 户 输入 一 个 以 上 的 值 

用 于 标识 元 素 收 集 的 数据 

用 于 提供 可 对 输入 框 元 素 的 数据 进行 检查 的 正则 表达 式 
用 于 为 数据 输入 提供 提示 

用 于 防止 访问 者 修改 特定 的 表单 元 素 


用 于 要 求 元 素 在 提交 表单 时 不 能 为 空 ( 当 输 入 框 类 型 为 hidden、 
image 或 按钮 类 型 时 不 可 用 ) 
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16.3 
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元 素 / 属性 描 ” 述 
size 用 于 指定 文本 框 或 密码 框 的 长 度 16.5 
STC 用 于 指定 活动 图 像 的 URL 16.15 
step (5) 用 于 控制 允许 输入 的 值 的 间隔 大 小 和 特殊 性 
type 用 于 指定 表单 元 素 的 类 型 为 文本 框 、 密 码 框 、 单 选 按钮 、 复 选 框 、 16.1 


隐藏 字段 、 提 交 按 钮 、 重 置 按钮 、 活 动 图 像 、 日 期 /时 间 框 、 数 字 
框 或 颜色 框 ; 用 于 从 一 系列 值 中 进行 选择 ; 或 用 于 输入 电话 号 但 、 
电子 邮件 地 址 或 一 组 搜索 词 

























































































value 用 于 指定 表单 元 素 的 默认 数据 16.5 
width, height 用 于 指定 输入 框 的 尺寸 ( 仪 在 输入 框 类 型 为 image 时 可 以 使 用 ) 16.15 
ins 用 于 标记 对 文档 增加 的 内 容 4.12 
cite 用 于 引用 对 修订 进行 解释 的 URL 4.12 
datetime 用 于 指定 修订 的 时 间 和 日 期 4.7 
kbd 用 于 标记 用 户 输入 4.13 
keygen (5) 用 于 生成 公 钥 一 私 钥 对 
autofocus (5) 用 于 指定 keygen 元 系 在 页 面 加 载 时 立即 获得 焦点 16:5 
challenge (5) 用 于 生成 与 密 钥 对 伴生 的 请 问 
disabled (5) 用 于 指示 元 素 在 当前 状态 下 是 不 可 用 的 16.16 
form (5) 用 于 将 元 素 同 男 外 一 个 不 包含 该 元 素 的 表单 关联 起 来 
keytype (5) 用 于 标识 要 生成 的 密 钥 对 类 型 
name (5) 用 于 标识 收集 的 数据 16.2 
label 用 于 为 表单 元 素 添加 标签 16.6 
for 用 于 指定 标签 所 属 的 表单 元 素 L166 
form (5) 用 于 将 元 素 同 另外 一 个 不 包含 该 元 素 的 表单 关联 起 来 
legend 用 于 为 表单 元 素 组 添加 标签 16.4 
1i 用 于 创建 列表 项 目 Ts 本 
value 用 于 指定 列表 项 目的 初始 值 ( 当 该 元 素 为 ol 的 子 元 素 时 ) 15.4 
link 用 于 指向 外 部 样式 表 或 其 他 外 部 资源 8.2 
href 用 于 指定 资源 的 URL 8.2 
hreflang (5) 用 于 指定 所 链接 的 资源 的 语言 
media 用 于 定义 样式 表 的 目标 媒体 类 型 和 (或 ) 媒体 特性 8.6 
rel 用 于 标识 链接 种 类 82 
sizes (5) 用 于 标识 引用 图 标的 大 小 〈 仅 在 rel 属性 为 icon 时 可 以 使 用 ) 
title 用 于 为 蔡 代 样式 表 或 其 他 资源 添加 标签 
type MIME 类 型 ( 仪 在 链接 类 型 不 为 text/css 时 需要 使 
main 用 于 指定 页 面 的 主要 内 容 区 域 3.7 
map (5) 用 于 创建 客户 端 图 像 映 射 
name 用 于 对 映射 命名 ， 从 而 使 其 可 在 以 后 被 引用 
mark (5) 出 于 引用 的 目的 ， 对 与 男 一 个 上 下 文 相关 的 文本 进行 突出 显示 15 
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元 素 / 属性 


menu (*) 
label (5) 
type (5) 

meta 
charset 
content 


http-equiv 


name 
meter (5) 
high, low (5) 
max, min (5) 
name (5) 
optimum (5) 
value (5) 
nav (9) 


noscript 
object 
data 
form (5) 
name 
type 
typemustmatch 


usemap 
width, height 
ol 
reversed (5) 
start (*) 
type (*) 
optgroup 


disabled 
label 
option 
disabled 
label 


selected 


描 述 
用 于 包含 命令 列表 
用 于 为 集 单 添加 标签 
用 于 标识 所 使 用 的 菜单 的 种 类 : context、list( 默认 值 ) 或 toolbar 
用 于 关联 页面 的 各 种 元 数据 








用 于 标识 页 面 本 里 的 字符 编码 
用 于 添加 关于 页 面 本 身 的 额外 信息 


用 于 创建 指向 其 他 页 面 的 自动 跳 转 ， 设 置 默认 脚本 语言 ， 声 明 字 符 
编码 


用 于 标识 关于 页 面 的 额外 信息 

用 于 表示 在 已 知 范围 内 的 量度 

用 于 指定 量度 为 high 或 low 

用 于 标识 允许 指定 的 值 的 最 大 值 和 最 小 值 
用 于 标识 收集 的 数据 

用 于 标识 最 优 值 

用 于 指定 量 表 的 当前 值 (必需 的 属性 ) 


用 于 标识 页 面 的 一 块 区 域 , 该 区 域 包含 指 癌 其 他 页 面 或 页 面 内 不 同 
部 分 的 链接 


用 于 提供 脚本 的 奉 代 内 容 

用 于 在 网 页 中 能 入 对 象 

用 于 标识 要 级 入 的 多 媒体 文件 的 来 源 

用 于 将 元 素 同 男 外 一 个 不 包含 该 元 素 的 表单 关联 起 来 
用 于 标识 对 象 ( 例 如， 对 其 编写 脚本 ) 

用 于 指出 对 象 的 MIME 类 型 


用 于 指示 对 象 data 属性 中 指定 的 资源 的 MIME 类 型 必须 与 对 象 
type 属性 中 标识 的 MIME 类 型 相同 


用 于 指示 对 象 是 否 拥有 相关 联 的 图 像 映射 
用 于 指定 对 象 框 的 尺寸 

用 于 创建 有 序列 表 

用 于 指定 列表 是 否 为 反 序 (…，3，2，1 ) 
用 于 指定 第 一 个 列表 项 目的 初始 值 

用 于 指定 每 个 列表 项 目 开 始 的 数字 类 型 


用 于 对 select 元 素 中 的 option 元 素 进 行 分 组 ， 一 组 内 的 option 元 
素 位 于 同一 个 标签 下 


用 于 指示 元 素 在 当前 状态 下 是 不 可 用 的 

用 于 为 选项 组 添加 标签 

用 于 创建 select 或 datalist 元 素 中 的 单独 的 选项 
用 于 指示 元 素 在 当前 状态 下 是 不 可 用 的 

用 于 指定 选项 如 何 出 现在 菜单 中 

用 于 标记 空白 表单 中 默认 被 选中 的 荣 单 选项 
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3 


4.18 
4.18 
4.18 
4.18 
4.18 
4.18 
3.0 


13.] 
15.1 
15.4 
13.2 
16.12 


16.16 
16.12 
16.12 
16.16 
16.12 
16.12 


元 素 /属性 
value 
output (5) 
for (5) 
form (5) 
name (5) 
p 
param 
name 
value 
pre 
progress (9) 
max (9) 
value (5) 


q 
cite 

rp (5) 

rt (5S) 

ruby (5) 

s (*) 

samp 

script 
async (5) 
charset 
defer 


SIC 


type (*) 


section (9) 

select 
autofocus (5) 
disabled 
form (5) 
multiple 
name 


required (9) 


size 
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描 述 
用 于 指定 集 单 选项 的 初始 值 
用 于 表示 计算 结果 
用 于 创建 计算 结果 与 进入 计算 过 程 的 值 之 间 的 显 式 关联 
用 于 将 元 素 同 为 外 一 个 不 包含 该 元 素 的 表单 关联 起 来 
用 于 标识 收集 的 数据 
用 于 创建 段落 
用 于 设置 对 象 的 属性 
用 于 标识 属性 的 种 类 
用 于 设置 有 名 称 的 属性 的 值 
用 于 表示 一 块 预 格式 化 文本 
用 于 标识 任务 的 完成 进度 
必须 为 大 于 0 的 有 效 浮 点 数 ( 如 果 有 的 话 ) 






































必须 为 大 于 或 等 于 0 的 有 效 浮 点 数 〈 且 小 于 或 等 于 max 属性 的 值 ， 


如 果 有 该 值 的 话 ) 

用 于 引用 来 自 另 一 来 源 的 短文 

用 于 给 出 引用 源 的 URL 

用 于 在 不 支持 旁 注 标记 的 浏览 器 中 的 劳 注 标记 文 本 周围 显示 括号 
用 于 标记 旁 注 标记 文本 

用 于 允许 文本 被 劳 注 标记 所 标记 

用 于 标识 不 再 准确 或 不 再 相关 的 文本 
用 于 呈现 某 程序 或 计算 系统 的 样本 输出 
用 于 为 页 面 添 加 “自动 的 ”脚本 

用 于 影响 脚本 的 加 载 和 执行 

用 于 指定 外 部 脚本 所 用 的 字符 集 

用 于 影响 脚本 的 加 载 和 执行 

用 于 引用 外 部 脚本 



































用 于 指定 脚本 所 用 的 脚本 语言 〈《 仅 在 脚本 类 型 不 为 texUjavascript 


时 需要 使 用 ) 

用 于 识别 文档 的 区 块 

用 于 创建 可 以 从 一 组 选项 中 进行 选择 的 表单 控件 

用 于 指定 select 元 系 在 页 面 加 载 时 立即 获得 焦点 

用 于 指示 元 系 在 当前 状态 下 是 不 可 用 的 

用 于 将 元 素 同 为 外 一 个 不 包含 该 元 素 的 表单 关联 起 来 
用 于 允许 用 户 在 菜单 中 选择 一 个 以 上 的 选择 

用 于 标识 从 采 单 收集 的 数据 





























用 于 标识 用 户 必 须 选 择 一 个 选项 才能 提交 表单 (第 一 个 option 于 








元 系 必 须 为 占 位 符 或 空 值 ) 





用 于 指定 在 初始 状态 下 采 单 中 可 见 的 项 目 数 ( 同时 用 于 将 某 单 显示 


为 列表 ) 
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元 素 / 属性 


small (*) 


source (5) 


media (5) 
src (9) 
type (5) 
span 
strong (*) 
style 
media 


title 
type (*) 


sub 

summary (5) 

sup 

svg (5) 

table 

tbody 

td, th 
colspan 


headers 


rowspan 
scope 

textarea 
autofocus (5) 
dirname (5) 
disabled 
form (5S) 
maxlength 
name 
placeholder (5) 
readonly 
required (5) 
rows, cols 
wrap (5) 

tfoot, thead 


描 述 
用 于 呈现 像 条 文 细 则 等 次 要 注释 
用 于 在 audio 或 video 元 素 中 标识 替代 媒体 资源 











用 于 标识 资源 的 目标 媒体 类 型 

用 于 标识 要 播放 的 音频 或 视频 文件 的 URL 
用 于 指出 资源 的 MIME 类 型 

用 于 包围 元 素 中 无 直接 语义 含义 的 内 容 
用 于 标识 元 素 内 特别 重要 的 内 容 

用 于 在 页 面 中 能 入 样式 信息 

用 于 标识 样式 表 的 用 处 

为 其 他 样式 表 标 记 说 明 标 签 











用 于 标识 样式 表 的 MIME 类 型 ( 仅 在 样式 类 型 不 为 text/css 时 需要 








使 用 ) 

用 于 创建 下 标 

用 于 标识 details 父 元 系 内 容 的 摘要 、 标 题 或 说 明文 字 
用 于 创建 上 标 

用 于 在 页 面 中 航 入 可 织 放 矢量 图 形 

用 于 创建 表格 





用 于 识别 表格 的 主体 部 分 ; 比 之 于 头 部 ( thead ) 和 尾部 ( tfoot ) 


分 别 用 于 在 表格 中 创建 普通 单元 格 和 标题 单元 格 
用 于 让 单元 格 跨 越 多 列 


通过 在 headers 值 中 包含 某 个 th 的 id 值 ， 从 而 将 这 个 th 与 一 个 


td 或 者 男 一 个 th 显 式 关联 

用 于 让 单元 格 跨越 多 行 

用 于 指定 th 应 用 于 哪些 行 、 列 、 行 组 或 列 组 
用 于 在 表单 中 创建 文本 块 输入 区 域 











用 于 指定 文本 区 域 元 素 在 页 面 加 载 时 立即 获得 焦点 


用 于 识别 输入 的 文本 的 方向 
用 于 指示 元 系 在 当前 状态 下 是 不 可 用 的 




















用 于 将 元 素 同 另外 一 个 不 包含 该 元 素 的 表单 关联 起 来 
用 于 指定 可 输入 到 textarea 元 素 的 字符 的 最 大 数量 


用 于 标识 从 文本 块 收集 的 数据 

用 于 为 数据 输入 提供 提示 

用 于 保护 文本 区 域 的 内 容 

用 于 要 求 元 系 在 提交 表单 时 不 能 为 空 

分 别 用 于 指定 文本 块 的 行 数 和 列 数 

用 于 指定 在 字段 内 容 提交 时 使 用 软 换行 或 便 换 行 
用 于 识别 表格 的 尾部 和 头 部 
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4.10 


4.10 
17.14 
18.1 
18.1 
18.1 
18.2 


18.2 
18.1 
16.11 
16.3 


16.16 


16.11 
16.11 
16.5 
16.14 
16.5 
16.11 


18.1 


元 素 /属性 
time (9) 
datetime (5) 
title 
tr 
track (9) 
default (5S) 
kind (5) 


label (5) 
src (9) 
srclang (5) 


video (5) 
autoplay (5) 
controls (5) 
loop (5) 
muted (5) 
poster (9) 


preload (5) 


src (9) 
width, height (5) 
wbr (5S) 
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描 述 
用 于 指定 日 期 和 时 间 
用 于 为 元 素 的 文本 所 表达 的 时 间或 日 期 提供 机 器 可 读 版 本 
用 于 创建 页 面 的 标题 ( 必须 使 用 ) 
用 于 在 表格 中 创建 行 
用 于 为 audio 或 video 父 元 陛 指定 外 部 计时 文本 轨道 
用 于 指示 默认 轨道 
用 于 识别 轨道 为 subtitles( 字幕 ) 、captions ( 标题 ) 、descriptions ( 摘 
述 ) 、chapters ( 篇 章 ) 或 metadata ( 元 数据 ) 
用 于 为 轨道 提供 用 户 可 读 的 名 称 
用 于 标识 轨道 数据 的 URL 
用 于 标识 轨道 数据 的 语言 
用 于 显示 一 段 文 本 ， 作 为 虽然 明确 地 呈现 却 不 怎么 准确 的 非 文本 
注解 
用 于 创建 无 序列 表 
ee 
用 于 般 入 视频 、 电 影 和 有 说 明文 字 的 音频 文件 
用 于 告 es 它 能 播放 视频 文件 时 立即 开始 播放 
用 于 告诉 浏览 器 为 视频 元 素 提 供 控 件 
用 于 告诉 视频 文件 在 播放 到 末尾 后 不 间断 地 继续 从 头 播放 
用 于 控制 音频 输出 的 默认 状态 


用 于 指定 占 位 图 像 的 URL， 该 图 像 在 媒体 加 载 时 或 加 载 出 现 问题 
时 显示 


用 于 指定 浏览 需 是 否 在 访问 者 开始 播放 媒体 文件 之 前 开始 下 载 该 
文件 

用 于 标识 要 播放 的 视频 文件 的 URL 

用 于 指定 视频 的 尺寸 

用 于 识别 在 没有 连 字符 的 单词 中 可 以 在 必要 时 进行 换行 的 位 置 
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附录 B 





CSS 引用 





本 附录 包含 以 下 CSS 引用 表格 。 








口 表 B.1 CSS 属性 和 值 ， 可 用 做 很 多 第 见 或 实用 的 CSS 属性 及 其 默认 值 、 人 允许 值 的 快速 


参考 。 


口 表 B.2 CSS 选择 器 和 结合 符 ， 


那些 。 


对 CSS 选择 需 和 结合 符 的 引用 ， 包 括 在 CSS3 中 引入 的 


口 表 B.3 CSS3 的 颜色 值 ， 涵 盖 了 在 CSS3 中 引入 的 颜色 值 (HSL、HSLA 和 RGBA ) 。 


口 表 B.4 媒体 查询 。 


关于 哪些 浏览 硕 文 持 哪 些 CSS3 属性 和 值 的 信息 ， 可 参考 www.quirksmode.org/css/contents. 
html、http://caniuse.com 及 http://findmebyip.com/litmus。 些 外， 还 可 以 使 用 像 Modernizr ( www. 
modernizr.com ) 这 样 的 JavaScript 库 测试 浏览 妖 对 这 些 特性 的 支持 情况 。 


B.1 CSS 属性 和 值 


属性 / 值 
background 
任 何 background-attachment 、background- 
color 、background-image、background-repeat 
和 (或 ) background-position 值 的 组 合 ， 或 
inherit 


background-attachment 
scroll 、fixed 或 inherit 


background-color 
颜色 值 、transparent 或 inherit 


background-image 
URL、CSS 渐变 、none 或 inherit 


表 B.1 CSS 属性 和 值 


描述 和 注释 


用 于 修改 元 素 的 背景 颜色 和 背景 图 像 

初始 值 取决 于 单独 的 属性 ， 不 继承 的 background-position 可 使 用 
百分数 

如 果 要 显示 多 重 背 景 ， 可 使 用 逗号 分 隔 组 合 背 景 值 ， 如 果 要 指定 
background-color， 应 包含 在 最 后 一 个 背景 中 


用 于 决定 背景 图 像 是 否 可 以 滚动， 以 及 深 动 的 方式 

初始 值 ，scroll; 不 继承 的 

如 末 要 显示 多 重 背 景 ， 可 以 为 每 个 背景 应 用 不 同 的 background- 
attachment 值 (用 逗号 分 隔 不 同 的 值 ) 

用 于 设置 元 素 的 背景 颜色 

初始 值 : transparent; 不 继承 的 

用 于 设置 元 素 的 背景 图 像 

初始 值 : none; 不 继承 的 

如 果 要 显示 多 重 背 景 ， 可 使 用 逗号 分 阳 图 像 值 
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属性 / 值 
background-position 
一 个 或 两 个 百分数 、 长 度 (或 一 个 百分数 和 
一 个 长 度 ) ， 或 top、center 、bottom 之 一 


和 (或 ) left、center、right 之 一 ， 或 使 
用 inherit 


background-repeat 
repeat 、repeat-x、repeat-y、no-repeat 或 
inherit 之 一 


background-size 
一 个 或 两 个 百分数 或 长 度 ， 或 auto， 或 使 用 


cover 或 contain 


border 
任何 border-width、border-style 值 和 (或 ) 
颜色 值 的 组 合 ， 或 inherit 


border-color 
一 至 四 个 颜色 值 、transparent 或 inherit 


border-radius 


border-top-right-radius 
border-bottom-right-radius 
border-bottom-left-radius 
border-top-left-radius 


border-spacing 

一 个 或 两 个 长 度 , 或 inherit 

border-style 

一 至 四 个 以 下 的 值 : none 、dotted、dashed、 
solid、 double、groove、ridge、inset、 
outset 、inherit 


border-top、 border-right、 border- 
bottom、 border-left 

任何 用 于 border-width、border-style 的 单个 
值 和 (或 ) 颜色 值 的 组 合 ， 或 使 用 inherit 


border-top-color 、border-right-color、 
border-bottom-color 、 border-left-color 


颜色 值 或 inherit 


border-top-style、 border-right-style.、 
border-bottom-style、 border-left-style 
none、dotted、dashed、solid、double、 
groove、ridge、inset、outset 或 
inherit 
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描述 和 注释 

用 于 设置 指定 的 背景 图 像 的 物理 位 置 

初始 值 ，0% 0%; 如 果 仅 设置 一 个 百分数 ， 它 会 用 于 水 平 位 置 ， 
而 垂直 位 置 的 初始 值 则 被 设 为 50 多 ;如 果 仅 使 用 一 个 关键 字 ， 另 
一 个 的 初始 值 则 为 center; 应 用 于 块 级 和 替换 元 素 ; 不 继承 的 ; 
百分数 相对 于 盒 本 身 的 尺寸 

如 果 要 显示 多 重 背 景 ， 可 以 为 每 个 背景 应 用 不 同 的 background- 
position 值 (用 到 号 分 隔 不 同 的 值 ) 


用 于 确定 背景 图 像 是 否 重复 及 重复 方式 

初始 值 ，repeat; 不 继承 的 

如 果 要 显示 多 重 背 景 图 像 ， 可 以 为 每 个 背景 图 像 应 用 不 同 的 
background-repeat 值 ( 用 去 号 分 隔 不 同 的 值 ) 


用 于 指定 背景 图 像 的 尺寸 

初始 值 : auto; 不 继承 的 

如 果 要 显示 多 重 背景 图 像 ， 可 以 为 每 个 背景 图 像 应 用 不 同 的 
background-size 值 ( 用 逗号 分 隅 不 同 的 值 ) 


用 于 定义 元 素 四 边 边框 的 所 有 要 素 
初始 值 取决 于 单独 的 属性 ; 不 继承 的 



























































用 于 指定 元 素 的 一 个 或 多 个 边 的 边框 的 颜色 
初始 值 : 元 素 的 color 属性 ; 不 继承 的 


用 于 为 盒 创 建 圆 角 
初始 值 : 0; 不 继承 的 


用 于 为 盒 的 一 个 角 设 置 border-radius 值 

初始 值 : 0; 不 继承 的 

注 : Firefox 的 旧版 本 使 用 与 此 不 同 的 语法 创建 单独 的 圆 角 : -moz- 
border-radius-topright、 -moz-border-radius-bottomright、-moz- 
border-radius-bottomleft 、-moz-border-radius-topleft 


用 于 指定 表格 边框 之 间 的 空 际 大 小 
初始 值 : 0; 仅 可 应 用 于 表格 元 系 ; 继承 的 


用 于 为 元 素 的 一 个 或 多 个 边 设置 边框 样式 
初始 值 : none; 不 继承 的 























用 于 为 元 素 的 一 个 边 一 次 性 定义 全 部 三 个 边框 属性 
初始 值 取决 于 单独 的 值 ; 不 继承 的 








用 于 为 元 素 的 一 个 边 定 义 边框 颜色 
初始 值 : color 属性 的 值 ; 不 继承 的 








用 于 为 元 素 的 一 个 边 定 义 边框 样式 
初始 值 : none; 不 继承 的 
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属性 / 值 
border-top-width、 border-right-width.、 


border-bottom-width、 border-left-width 
thin、medium、thick 或 长 度 


border-width 

一 至 四 个 以 下 的 值 : thin、medium、thick 
或 长 度 
bottom 
百分数 、 长 度 、 
box-shadow 
可 选 的 inset ， 接 着 是 二 至 四 个 长 度 值 ， 接 
着 是 颜色 值 


auto 或 inherit 


clear 
none 、left、right、both 或 inherit 


clip 
auto、rect 或 inherit 


color 


颜色 值 或 inherit 


CUISOT 
auto、 crosshair、default、pointer、 
progress、 move、e-resize、ne-resize、nw- 
resize、n-resize、se-resize、SW-resize、 
s-resize、w-resize、text、wait、help、 
URL 或 inherit 之 一 


display 

inline 、 block、inline-block、1list-item、 
run-in、 compact、table、inline-table、 
table-row-group、 table-header-group.、 
table-footer-group、 table-row、table- 
column-group、table-column、table-cell、 
table-caption、 ruby、 ruby-base、ruby- 
text ruby-base-group、ruby-text-group、 
none 、inherit 之 一 


float 
left、 right、none、inherit 之 一 


font 

如 果 需 要 ,任何 font-style、font-variant 
和 font-weight 值 的 组 合 ， 接 着 是 必需 的 
font-size、 可 选 的 line-height 值 和 必需 的 
font-family， 或 使 用 inherit 





tx 


描述 和 注 针 
用 于 为 元 素 的 一 个 边 定义 边框 宽度 
初始 值 : mdeium; 不 继承 的 














用 于 为 元 素 的 一 个 或 四 个 边 定义 边框 宽度 
初始 值 : mdeium; 不 继承 的 











用 于 设置 元 系 相 对 于 其 父 元 系 撒 部 边缘 的 位 移 大 小 
初始 值 : auto; 不 继承 的 ; 百分数 相对 于 包含 块 的 高 度 


用 于 为 盒 添加 一 个 或 多 个 阴影 。 长 度 值 (依次 ) 表示 相对 于 盒 右 
侧 的 位 置 (负数 则 表示 相对 于 盒 左 侧 的 位 置 ) 、 相 对 于 盒 底部 的 
位 置 ( 负数 则 表示 相对 于 盒 顶 部 的 位 置 ) 、 模 糊 半径 (不 可 为 负数 ) 
和 伸展 距离 ( 负数 会 让 阴影 收缩 ) 。 每 个 box-shadow 值 之 间 用 去 
号 分 隔 


初始 值 : none; 继承 的 


用 于 防止 元 素 包围 在 浮动 元 素 的 一 边 或 两 边 
初始 值 : none; 只 能 应 用 于 块 级 元 素 ; 不 继承 的 


用 于 仅 显示 元 素 的 一 部 分 

初始 值 : auto; 只 能 应 用 于 绝对 定位 的 元 系 

用 于 设置 元 系 的 文本 颜色 

初始 值 : 父 元 系 的 颜色 ; 有 的 颜色 是 由 浏览 锅 设 置 的 ; 继承 的 
用 于 设置 指针 的 形状 

初始 值 : auto; 继承 的 















































用 于 确定 元 素 如 何 显 示 ， 以 及 是 和 否 显示 
初始 值 : 通常 为 inline 或 block; 不 继承 的 








用 于 确定 元 素 回 父 元 素 的 哪 一 边 译 动 
初始 值 : none; 不 可 应 用 于 定位 过 的 元 素 " 或 生成 的 内 容 ; 不 继承 的 


用 于 设置 文本 的 字体 系列 、 字 体 大 小 (这 二 者 是 必需 的 ) 及 可 选 
的 字体 样式 、 变 体 、 粗 细 和 行 高 

初始 值 取决 于 单独 的 属性 ; 继承 的 ; font-size 和 1line-height 可 
使 用 百分数 ; font-size 和 font-family 是 必需 的 ， 否 则 font 属性 
是 无 效 的 











J 即 设 为 绝对 定位 、 相 对 定位 或 固定 定位 的 元 素 。 一 一 译 者 注 
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属性 / 值 
font-family 


一 个 或 多 个 由 引号 包 着 的 字体 名 称 ， 接 着 是 
可 选 的 表示 类 属 的 字体 名 称 ， 或 使 用 inherit 


font-size 
络 对 天 小 。 钴 鸡 天 水 长度、 


inherit 








百分数 或 


font-style 
normal 、italic、oblique 或 inherit 


font-variant 
normal 、small-caps 或 inherit 


font-weight 

normal 、bold、bolder、1lighter、100、 
200、300、400、500、600、700、800、900 
或 inherit 
height 

长 度 、 百 分 数 、auto 或 inherit 
left 

长 度 、 百 分 数 、auto 或 inherit 


letter-spacing 
normal 、 长 度 或 inherit 


line-height 
normal 、 数 字 、 长 度 、 百 分 数 或 inherit 


list-style 
任何 list-style-type、list-style-position 
和 (或 ) list-style-image 值 的 组 合 ， 或 使 
用 inherit 


list-style-image 
URL、none 或 inherit 


list-style-position 
inside 、outside 或 inherit 


list-style-type 

disc、 circle、square、decimal、1lower- 
roman、 upper-roman、lower-alpha、upper- 
alpha、none 或 inherit 


margin 
一 至 四 个 以 下 的 值 : 长 度 、 百 分 数 、auto 或 


inherit 
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描述 和 注释 


用 于 为 文本 选择 字体 系列 
初始 值 : 取决 于 浏览 人 各; 继承 的 


用 于 设置 文本 的 大 小 
初始 值 : medium; 计算 的 值 是 继承 的 ;百分数 相对 于 父 元 素 的 字 
体 大 小 


用 于 将 文本 标记 为 斜体 
初始 值 : normal; 继承 的 


用 于 设置 小 型 大 写字 母 
初始 值 : normal; 继承 的 
用 于 应 用 、 移 除 、 调 整 粗 体格 式 


初始 值 : normal; 数字 值 当 做 关键 字 而 非 整数 进行 处 理 (例如 ， 
不 能 使 用 150 ) ; 继承 的 











用 于 设置 元 素 的 高 度 
初始 值 : auto; 可 应 用 于 除了 非 蔡 换行 内 元 素 、 表 格 列 和 列 组 以 
外 的 任何 元 素 ; 不 继承 的 


用 于 设置 元 素 相 对 于 其 父 元 素 左 侧 边 缘 的 位 移 大 小 

初始 值 : auto; 只 能 用 于 定位 过 的 元 素 ; 不 继承 的 ; 百分数 相对 
于 包含 块 的 宽度 

用 于 设置 字母 之 间 的 间 际 大 小 

初始 值 : normal; 继承 的 

用 于 设置 文本 行 之 间 的 距离 

初始 值 : normal; 继承 的 ;百分数 相对 于 元 素 上 自身 的 字体 大 小 

用 于 设置 列表 的 标识 ( 常规 的 或 定制 的 ) 及 其 位 置 

初始 值 取 决 于 单独 元 系 的 初始 值 ; 只 能 应 用 于 列表 元 素 ; 继承 的 






































用 于 为 列表 指定 定制 的 标识 
初始 值 : none; 只 能 应 用 于 列表 元 素 ; 被 盖 list-style-type; 继 
承 的 


用 于 确定 列表 标识 的 位 置 
初始 值 : outside; 只 能 应 用 于 列表 元 素 ; 继承 的 


用 于 设置 列表 的 标识 
初始 值 : disc; 只 能 应 用 于 列表 元 素 ; 如 宁 list-style-type 是 有 
效 的 则 不 使 用 ; 继承 的 


























用 于 设置 元 素 与 其 父 元 素 和 《或 ) 同胞 元 系 之 间 在 一 个 或 多 个 边 
上 的 间 隅 大 小 

初始 值 取 决 于 浏览 需 和 width 值 ; 不 继承 的 ; 百分数 相对 于 包含 
块 的 宽度 
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属性 / 值 


margin-top、 margin-right、 margin- 
bottom、 margin-left 
长 度 、 百 分 数 、auto 或 inherit 


max-height 、 max-width 
长 度 、 百 分 数 、none 或 inherit 


min-height 、 max-width 


长 度 、 百 分 数 或 inherit 


opacity 
0.0 ( 表示 完全 透明 ) 至 1.0〈 表示 完 全 不 透 
明 ) 之 间 的 任何 小 数 


orphans 
豆 数 或 inherit 


overflow 
visible、hidden、scroll、auto 或 ijnherit 


padding 
一 至 四 个 长 度 或 百分数 ， 或 使 用 inherit 


padding-top、padding-right、padding- 
bottom、 padding-left 
长 度 、 百 分 数 或 inherit 


page-break-after 、page-break-before 
always、avoid、auto、right、left 或 
inherit 


page-break-inside 
avoid、auto 或 inherit 


position 
static、relative、absolute、fixed 或 
inherit 


right 
长 度 、 百 分 数 、auto 或 inherit 


table-layout 
fixed、auto 或 inherit 


text-align 
left 、iright、center 、justify、 字 符 串 或 
inherit 


text-decoration 
任何 underline 、overline 、line-through 和 
blink 的 组 合 ,， 或 none、inherit 


( 续 ) 
描述 和 注释 
用 于 设置 元 素 与 其 父 元 素 和 (或 ) 同胞 元 素 之 间 在 一 个 边 上 的 间 
阳 大 小 
初始 值 : 0; 不 继承 的 ; 百分数 相对 于 包含 块 的 宽度 ; 如 果 
width、margin-right 和 margin-left 之 和 大 于 父 元 素 的 包含 块 ， 
则 margin-right 和 margin-left 的 值 会 被 履 状 


分 别 用 于 设置 元 素 的 最 大 高 度 和 (或 ) 最 大 宽度 

初始 值 : none; 不 能 用 于 行内 元 素 或 表格 元 素 ; 不 继承 的 ; 百 分 
数 相 对 于 包含 块 的 高 度 / 宽度 

分 别 用 于 设置 元 素 的 最 小 高 度 和 ( 或 ) 最 小 宽度 

初始 值 : none; 不 能 用 于 行内 元 素 或 表格 元 素 ; 不 继承 的 ; 百 分 
数 相 对 于 包含 块 的 高 度 / 宽度 


用 于 让 元 系 半 透明 或 不 可 见 
初始 值 : 1; 不 继承 的 



























































用 于 指定 元 素 可 以 单独 出 现在 页 面 底 部 的 行 数 
初始 值 : 2; 只 能 用 于 块 级 元 素 ; 继承 的 ; 仅 用 于 打印 媒体 


用 于 确定 当 内 容 超 出 元 素 内 容 区 域 时 额外 的 内 容 如 何 显示 
初始 值 : visible; 只 能 用 于 块 级 元 素 和 替换 元 素 ; 不 继承 的 


用 于 指定 元 素 内 容 区 域 和 边框 之 间 在 一 个 或 多 个 边 上 的 距离 
初始 值 取决 于 浏览 带 ; 不 继承 的 ; 百分数 相对 于 包含 块 的 宽度 


用 于 指定 元 素 内 容 区 域 和 边框 之 间 在 一 个 边 上 的 距离 
初始 值 : 0; 不 继承 的 ; 百分数 相对 于 包含 块 的 宽度 





























用 于 指定 什么 时 候 应 出 现 分 页 ， 什 么 时 候 不 应 出 现 
初始 值 : auto; 只 能 用 于 块 级 元 素 ; 不 继承 的 ; 仅 用 于 打印 媒体 








阻止 跨 页 的 元 素 产 生 分 页 

初始 值 : auto; 只 能 用 于 块 级 元 素 ; 继承 的 ; 仅 用 于 打印 媒体 
用 于 确定 元 素 如 何 相 对 于 文档 流 进行 定位 

初始 值 : static; 不 继承 的 




















用 于 设置 元 系 相 对 于 其 父 元 又 右 侧 边缘 的 位 移 大 小 
初始 值 : auto; 只 能 用 于 定位 过 的 元 系 ; 不 继承 的 ; 百分数 相对 
于 包含 块 的 宽度 


用 于 选择 确定 单元 格 宽 度 的 算法 
初始 值 : auto; 不 继承 的 


用 于 指定 文本 对 齐 方式 
初始 值 取决 于 浏览 融和 书写 方向 ; 只 能 应 用 于 块 级 元 系 ; 继承 的 











用 于 修饰 文本 ( 大 多 数 为 线条 ) 
初始 值 : none; 不 继承 的 
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属性 / 值 
text-indent 


长 度 、 百 分 数 或 inherit 


text-overf low 
clip、ellipsis 或 "string" 


text-shadow 


两 个 或 四 个 长 度 值 ， 接 春 是 颜色 值 


text-transform 
capitalize、 uppercase、1lowercase、none 
或 inherit 


transform 

none 或 一 系列 变形 功能 (matrix、translate、 
translateX、translateY、scale、 
scaleX、scaleY、rotate、skew、skewX、 
skewy ) 


transform-origin 

一 个 或 两 个 百分数 或 长 度 (或 一 个 百分数 和 
一 个 长 度 ) ,或 top、center、botton 之 一 
和 (或 ) left、center、right 之 一 


transition 

依次 定义 transition-property、transition- 
duration、transition-timing-function 和 
transition-delay 的 简 记 法 〈 用 空格 分 隔 ) 


transition-property 
none 、all 或 用 逗号 分 隔 的 一 组 CSS 属性 





transition-duration 


以 秒 或 晤 秒 为 单位 的 时 间 值 


transition-timing-function 

ease 、linear、ease-ijn、ease-out、ease- 
in-out 、cubic-bezier(number, number, 
number, number) 


transition-delay 


以 秒 或 这 秒 为 单位 的 时 间 值 


top 
长 度 、 百 分 数 、auto 或 inherit 
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描述 和 注释 
用 于 设置 段落 第 一 行 的 缩 进 量 
初始 值 : 0; 只 能 应 用 于 块 级 元 系 ; 继承 的 ; 百分数 相对 于 包含 块 
的 宽度 


用 于 指定 文本 不 可 见 时 处 理 洪 出 的 方式 
初始 值 : clip 


用 于 为 元 系 的 文本 添加 一 个 或 多 个 阴影 。 长 度 值 (依次 ) 表示 相 
对 于 文本 右 侧 的 位 置 (负数 则 表示 相对 于 文本 左 侧 的 位 置 ) 、 相 
对 于 文本 底部 的 位 置 ( 负数 则 表示 相对 于 文本 顶部 的 位 置 ) 、 模 
糊 半 径 (不 可 为 负数 ) 和 伸展 距离 ( 负数 会 让 阴影 收缩 ) 。 每 个 
text-shadow 值 之 间 用 逗号 分 隔 

初始 值 : none; 继承 的 


用 于 设置 元 素 的 文本 的 大 小 写 
初始 值 : none; 继承 的 
































用 于 对 元 素 进 行 形状 、 大 小 或 方向 上 的 变形 
初始 值 : none; 不 继承 的 ; 变形 功能 按照 它们 所 列 的 顺序 进行 
应 用 








用 于 定义 应 用 于 元 素 的 变形 的 起 点 
初始 值 : 50% 50%; 不 继承 的 ; 只 能 应 用 于 块 级 元 系 和 行内 元 素 ; 
百分数 相对 于 元 素 盒 的 大 小 




















用 于 为 元 素 定 义 变形 效果 
初始 值 取决 于 单独 的 属性 ; 可 应 用 于 所 有 的 元 素 ， 包 括 :before 和 
:after 伪 元 素 ; 值 的 顺序 对 此 属性 很 重要 








用 于 识别 在 应 用 了 变形 的 元 素 上 定义 的 CSS 属性 
初始 值 : all; 不 继承 的 ; 可 应 用 于 所 有 的 元 素 ， 包 括 :before 和 
:after 伪 元 素 


用 于 确定 完成 变形 所 需 的 时 间 
初始 值 : os (0 秒 ) ; 不 继承 的 ; 可 应 用 于 所 有 的 元 素 ， 包 括 
:before 和 :after 伪 元 素 


描述 用 于 变形 计算 过 程 的 中 间 值 的 使 用 方法 
初始 值 : ease; 可 应 用 于 所 有 的 元 素 ， 包 括 :pefore 和 :after 伪 元 
素 























用 于 定义 变形 开始 的 时 间 
初始 值 : os (0 秒 ) ; 不 继承 的 ; 可 应 用 于 所 有 的 元 素 ， 包 括 
:before 和 :after 伪 元 素 


用 于 设置 元 素 相 对 于 其 父 元 素 顶 部 边缘 的 位 移 大 小 
初始 值 : auto; 只 能 用 于 定位 过 的 元 素 ; 不 继承 的 ; 百分数 相对 
于 包含 块 的 高 度 
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属性 / 值 描述 和 注释 
vertical-align 用 于 指定 元 素 在 垂直 方向 上 的 对 齐 方式 
baseline、sub、super、top 、text-top、 初始 值 : baseline; 不 能 应 用 于 行内 元 素 和 表格 单元 格 元 素 ; 不 
middle 、bottom 、text-bottom、 百 分 数 、 长 继承 的 ; 百分数 相对 于 元 素 的 line-height 属性 
度 或 inherit 


























visibility 用 于 在 不 将 元 素 移出 文档 流 的 情况 下 让 元 素 不 可 见 
visible、hidden、collapse 或 inherit 初始 值 ，inherit， 事实 上 是 不 继承 的 ( 仍 存 争议 ) 
white-space 用 于 指定 如 何 处 理 空格 


normal 、pre、nowrap、pre-wrap、pre-lined 初始 值 ，normal; 只 能 用 于 块 级 元 素 ; 继承 的 
或 inherit 






































widows 用 于 指定 元 素 可 以 单独 出 现在 页 面 顶 部 的 行 数 

整数 或 inherit 初始 值 : 2; 只 能 用 于 块 级 元 素 ; 继承 的 ; 仅 用 于 打印 媒体 

width 用 于 设置 元 素 的 宽度 

长 度 、 百 分 数 、auto 或 inherit 初始 值 : auto; 不 能 应 用 于 行内 元 素 、 表 格 行 或 行 组 ; 不 继承 的 ; 
百分数 相对 于 包含 块 的 宽度 

word-spacing 用 于 设置 单词 之 间 的 距离 

normal 、 长 度 或 inherit 初始 值 : normal; 继承 的 

z-index 用 于 设置 元 素 相 对 于 重 闭 元 素 的 深度 

auto 、 整 数 或 inherit 初始 值 : auto; 只 能 应 用 于 定位 了 的 元 素 ; 不 继承 的 





表 B.1 是 根据 www.w3.org/TR/CSS21/propidx.html 提供 的 完整 规范 制订 的 ， 版 权 由 万 维 网 联盟 〈 美 国 麻 省 理工 学 院 、 法 
国 国家 计算 机 科学 与 控制 研究 所 、 日 本 庆 应 义 熟 大 学 ) 所 有 。 保 留 所 有 权利 。 


B.2 CSS 选择 器 和 结合 符 


表 B.2 CSS 选择 器 和 结合 符 














模 式 2 之 CSS3 选择 器 类 型 

- 任何 元 素 通用 选择 需 

2 类 型 为 E 的 元 素 类 型 选择 紫 

E[foo] 带 "foo" 属性 的 E 元 素 属性 选择 天 

E[foo="bar"] "foo" 属性 值 恰 为 "bar" 的 EE 元素 (引号 属性 选择 需 
是 可 选 的 ) 

E[foo ~ ="bar"] "foo" 属性 为 一 组 空格 分 隔 的 值 ， 且 其 中 属性 选择 需 
之 一 恰 为 "par" 的 E 元 素 (引号 是 可 选 的 ) 

E[foo^="bar"] "foo" 属性 以 "bar" 开头 的 王 元 素 ( 引 号 十 属性 选择 需 
是 可 选 的 ) 

E[foo$="bar"] "foo" 属性 以 "bar" 结束 的 E 元 素 (引号 是 属性 选择 需 
是 可 选 的 ) 
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模 式 
E[foo*="bar"| 


E[foo|="en"] 


E:root 


E:nth-child(n) 


E:nth-last-child(n) 


E:nth-of-type(n) 


E:nth-last-of- 


type(n) 
:first-child 
:last-child 


m | mMm | rn 


:first-of-type 


ml 


:last-of-type 
:only-child 


rm | rm 


:only-of-type 


ml 


:empty 


ml 


m mm 


:active 


ml 


:target 
:lang(fr) 


ml 


ml 


:enabled 
:disa-bled 


:checked 


rm | rm 


E::first-line 
E::first-letter 
E: :before 
E::after 
E.warning 
Etmyid 

E:not(s) 


:link, E:visited 


:focus, E:hover, 


人 沪 
"foo" 属性 值 在 某 处 包含 "bar" 的 上 元 素 
(引号 是 可 选 的 ) 


"foo" 属性 为 一 组 连 字 符 分 隔 的 值 且 (从 
左边 开始 ) 以 "en" 开头 的 E 元 素 (引号 
是 可 选 的 ) 


E 元 系 ， 文 档 根 元 又 
E 元 系 ， 其 父 元 素 的 第 n 个 子 元 系 


























E 元 素 ， 其 父 元 素 的 倒数 第 n 个 子 元 素 
E 元 素 ， 该 类 型 的 第 n 个 同胞 元 素 

E 元 素 ， 该 类 型 的 倒数 第 mn 个 同胞 元 对 
E 元 素 ， 其 父 元 素 的 第 一 个 子 元 素 

E 元 素 ， 其 父 元 素 的 最 后 一 个 子 元 素 
E 元 素 ， 该 类 型 的 第 一 个 同胞 元 素 

E 元 素 ， 该 类 型 的 最 后 一 个 同胞 元 系 
E 元 素 ， 其 父 元 素 的 唯一 子 元 素 


E 元 素 ， 该 类 型 的 唯一 同胞 元 素 
没有 子 元 素 〈 含 文本 绪 点 ) 的 E 元 素 


作为 目标 尚未 访问 过 ( :link ) 或 已 经 访 
问 过 ( :visited ) 的 超 链 接 的 E 元 素 


处 于 特定 用 户 操作 下 的 元 系 





作为 引用 URI 目标 的 E 元 素 
语言 为 "fr" 的 上 元 素 
状态 为 有 效 的 或 无 效 的 用 户 界面 E 元 素 





选中 了 的 用 户 界 面 E 元素 (如 单 选 按钮 或 
复 选 框 ) 


E 元 素 在 格式 上 的 第 一 行 

E 元 素 在 格式 上 的 第 一 个 字母 
E 元 系 之 前 的 生成 内 容 

E 元 素 之 后 的 生成 内 容 

类 为 "warning" 的 E 元 素 

ID 等 于 "myid" 的 卫 元 素 


与 简单 选择 需 s (例如 input:not(.warning) ) 
不 匹配 的 E 元素 
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CSS3 选择 器 类 型 

是 属性 选择 器 
属性 选择 器 

是 结构 伪 类 

是 结构 伪 类 

是 结构 伪 类 

是 结构 伪 类 

是 结构 伪 类 
结构 伪 类 

是 结构 伪 类 

是 结构 伪 类 

是 结构 伪 类 

是 结构 伪 类 

是 结构 伪 类 

是 结构 伪 类 
链接 伪 类 
用 户 操作 伪 类 

是 目标 伪 类 
:lang() 伪 类 

是 UI 元素 状态 伪 类 

是 UI 元素 状态 伪 类 


: :first-line 伪 元 素 

: :first-letter 伪 元 素 
: :before 伪 元 素 

: :after 伪 元 素 

类 选择 天 

ID 选择 天 


否定 伪 类 


to 
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( 续 ) 
模 式 -4 CSS3 选择 器 类 型 
ET 作为 E 元 素 后 代 的 F 元 素 后 代 结 合 符 
E >F 作为 上 元 素 子 元 素 的 F 元 素 于 元 素 结合 符 
EE 紧 接 E 元 素 后 面 的 F 元 素 相 邻 同胞 元 素 结合 符 
E ~ F 位 于 E 元 素 后 面 的 F 元 素 是 通用 同胞 元 素 结合 符 





表 B.2 是 根据 www.w3.org/TR/css3-selectors/ 提供 的 CSS3 选择 融 模 型 制订 的 ， 版 权 由 万 维 网 联盟 (美国 麻 省 理工 学 院 、 


法 国 国家 计算 机 科学 与 控制 研究 所 、 日 本 庆 应 义 训 大 学 ) 所 有 。 


B.3 CSS3 闫 色 值 


颜色 值 


rgb(red-value, green-value, 
blue-value) 


rgba(red-value, green-value, 
blue-value, alpha) 


hsl(hue-value, saturation-value, 
lightness-value) 


hsla(hue-value, saturation-value, 
lightness-value, alpha) 


B.4 媒体 查询 


特 
width 
min-width 
max-width 
长 度 
height 
min-height 
max-height 
人 


图 灵 社 





保留 所 有 权利 。 


表 B.3 CSS3 颜色 值 
描述 和 注释 
RGB ( 红 、 绿 、 蓝 ) 颜色 模式 
值 可 以 是 0 到 255 之 间 的 数字 或 百分数 (不 能 是 数字 和 百分数 的 组 合 ) 
rgb(0，0，0) 和 rgb(0%，0%，0%) 为 黑色 
rgb(255，255，255) 和 rgb(100%，100%，100%) 为 白色 


RGB 颜色 模式 ， 加 上 alpha 透明 度 
颜色 全 同 RGB 语法 相同 

第 四 个 参数 alpha 是 大 于 等 于 0.0 (完全 透明 ) 且 小 于 等 于 1.0 ( 完 
全 不 透明 ) 的 小 数 


HSL (色相 、 饱 和 度 、 亮 度 ) 颜色 模式 
色相 值 用 颜色 环 的 角度 (0 至 360 之 间 的 数字 ) 表示 : 0 和 360 























为 红色 ，120 为 绿色 ，240 为 蓝 色 ， 位 于 之 间 的 其 他 值 表示 其 他 

颜色 

饱和 度 值 用 百分数 表示 : 0% 为 灰色 ，100% 为 完全 饱和 的 颜色 
亮度 值 用 百分数 表示 : 0% 为 黑色 ，100% 为 白色 ，50% 为 “正常 ” 

HSL 颜色 模式 ， 加 上 alpha 透明 度 

颜色 全 同 HSL 语法 相同 











第 四 个 参数 alpha 是 大 于 等 于 0.0( 完全 透明 ) 且 小 于 等 于 1.0( 完 


全 不 透明 ) 的 小 数 


表 B.4 媒体 查询 
描述 和 注释 


输出 设备 的 目标 显示 区 域 的 宽度 、 最 小 宽度 或 
应 用 : 可 视 媒 体 和 触觉 媒体 

















输出 设备 的 目标 显示 区 域 的 高 度 、 


应 用 : 可 视 媒体 和 触 党 媒体 
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特 性 
device-width 
min-device-width 
max-device-width 
长 度 
device-height 
min-device-height 
max-device-height 
长 度 
orientation 
portrait 或 landscape 


aspect-ratio 
min-aspect-ratio 
max-aspect-ratio 


比例 (如 4/3 或 16/9 ) 


device-aspect-ratio 
min-device-aspect-ratio 
max-device-aspect-ratio 


比例 (如 4/3 或 16/9 ) 


color 

min-color 

max-color 

整数 

color-index 
min-color-index 
max-color-index 

整数 

monochrome 、 
min-monochrome、 
max-monochrome 

整数 

resolution 
min-resolution 
max-resolution 

分 辨 率 ( 如 300dpi 或 118dpcm ) 
scan 

progressive 或 interlace 
grid 

0 或 1 
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描述 和 注释 
输出 设备 的 呈现 表面 的 宽度 、 最 小 宽度 或 最 大 宽度 
应 用 : 可 视 媒 体 和 触觉 媒体 























输出 设备 的 呈现 表面 的 高 度 、 最 小 高 度 或 最 大 高 度 
应 用 : 可 视 媒体 和 触觉 媒体 





当 height 特性 值 大 于 或 等 于 width 特性 值 时 ， 方 向 为 portrait; 
否则 为 landscape 

应 用 : 位 图 媒体 

width 特性 值 与 height 特性 值 的 比例 、 最 小 比例 或 最 大 比例 
应 用 : 位 图 媒体 


device-width 特性 值 与 device-height 特性 值 的 比例 、 最 小 比例 或 
最 大 比例 
应 用 : 位 图 媒体 





输出 设备 每 种 颜色 的 位 数 、 最 小 位 数 或 最 大 位 数 ; 如 采 设 备 不 是 
彩色 的 设备 ， 则 值 为 0 
应 用 : 可 视 媒 体 





输出 设备 颜色 查询 表 中 项 目的 数量 、 最 小 数量 或 最 大 数量 ; 如 于 
设备 不 使 用 颜色 查询 表 ， 则 值 为 0 
应 用 : 可 视 媒 体 











在 单 色 帧 缓冲 中 每 像 系 的 位 数 、 最 小 位 数 或 最 大 位 数 ; 如 果 设 备 
不 是 单 色 的 设备 ， 则 值 为 0 
应 用 : 可 视 媒 体 


输出 设备 的 分 辨 率 、 最 小 分 辨 率 或 最 大 分 辨 率 ( 即 像素 密度 ) ; 
resolution (不 是 min-resolution 或 max-resolution ) 不 会 检测 使 


用 非 方形 像素 的 设备 


电视 输出 设备 的 扫描 过 程 

应 用 : 电视 媒体 

设备 是 基于 栅 格 的 还 是 基于 位 图 的 ; 如 果 输 出 设备 是 基于 栅 格 的 
( 如 TTY 终端 ) 则 值 为 1， 和 否则 值 为 0; 这 种 媒体 查询 也 可 以 使 
用 不 带 值 的 形式 表示 (例如 @media grid ) 

应 用 : 可 视 媒体 和 触觉 媒体 
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关注 图 灵 教育 关注 图 灵 社 区 
iT uring.cn 


在 线 出 版 电子 书 《 码 农 》 杂 志 图 灵 访 谈 …… 


全 


一 QQ 联系 我 们 一 一 一 一 


读者 QQ 和 群 ，218139230 


一 一 一 一 微 情 联系 我 们 一 一 一 一 


官方 账号 - @@ 图 灵 教 育 @ 图 灵 社 区 @@ 图 灵 新 知 
市 场合 作 - 侈 图 灵 吉 时 @ 图 灵 刘 紫 凤 
写作 本 版 书 ，@ 图 灵 小 花 和 @@ 陈 冰 _ 图 书 出 版 人 
翻译 英文 书 ，@ 李 松 峰 @ 朱 痢 ituring @ 楼 伟 珊 
翻译 日 文书 或 文章 ， 人 @ 图 灵 乐 区 

德 详 韩 文书 ，@ 图 灵 陈 曦 

电子 书 合 作 ; @hi_jseanne 

图 灵 访 谈 /《 码 农 )》 亲 志 : 侈 李 盼 ituring 

加 入 我 们 : @ 王 子 是 好 .人 





性 











一 做 信 联 系 我 们 
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“我 们 这 些 有 过 不 少 实际 经 验 的 设计 师 本 书 是 风靡 全 球 的 HTML 和 CSS 入 门 教程 的 最 新 


往往 想当然 地 认为 自己 什么 都 知道 ， 事 实 并 版 ， 至 第 6 版 累积 销量 已 超过 100 万 册 ， 被 翻译 为 十 
a ase hn A 多 种 语言 ， 长 期 雁 路 亚马逊 书店 计算 机 图 书 排行 榜 
西 其 实 都 是 错 的 。 所 有 Web 设 计 师 都 需要 看 以 普 . 


下 这 本 书 。 第 8 版 乘 承 作者 直观 透彻 、 循 序 渐进 、 基 础 知识 
你 证 时 攻 全 者 ve 与 案例 实践 紧密 结合 的 讲授 特色 ， 采 用 独特 的 双 栏 
图 文 并 排 方式 ， 手 把 手指 导读 者 从 零 开始 轻松 入 
门 。 相 较 第 7 版 ， 全 书 2/3 以 上 的 内 容 进行 了 更 新 ， 
全 面 反映 了 HTML5 和 CSS3 的 最 新 特色 ， 细 致 阐述 了 
响应 式 Web 设 计 与 移动 开发 等 热点 问题 。 书 中 主要 
内 容 包 括 : 如 何 创建 HTML5 页 面 ， 如 何 使 用 HTML5 
元 素 ， 如 何 用 CSS3 为 网 页 添加 样式 ， 如 何 向 页 面 添 
加 JavaScript 代 码 ， 如 何 测试 做 好 的 页 面 并 将 其 上 传 
到 万 维 网 。 另 外 ， 本 书 强调 渐进 增强 这 种 网 站 设计 
方法 的 重要 性 ， 并 将 其 贯穿 在 全 书 的 具体 实践 中 。 
作者 专 为 本 书 设计 了 内 容 丰 富 的 配套 网 站 
htmlcssvqs.com， 提 供 海量 精彩 示例 、HTML 与 CSS 
元 素 及 属性 列表 以 及 其 他 附加 材料 ， 方 便 读者 随时 
参考 与 引用 。 


“这 本 书 让 我 读 起 来 很 踏实 。 


“自从 2006 年 购买 第 5 版 ， 我 就 认 准 这 
本 书 了。 第 8 版 不 论 从 内 容 组 织 还 古 示 例 讲 
解 上 都 有 不 少 惊喜 ， 从 中 可 以 看 出 作者 在 新 
版 本 上 耗费 了 大 量 心血 ! “ 


“本 书 介 绍 如 何 设计 、 组 织 以 及 格式 化 
网 站 ， 是 Web 开 发 方面 的 经 典 教 程 。” 
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欢迎 加 入 


到 灵 社区 


电子 书 发 售 乎 合 


电子 出 版 的 时 代 已 经 来 临 ， 在 许多 出 版 界 同行 还 在 犹 耳 往 得 的 时 候 ， 图 灵 社 区 已 经 
采取 实际 行动 拥抱 这 个 出 版 业 巨 变 。 相 比 纸 质 书 ， 电 子 书 具 有 许多 明显 的 优势 。 已 
不 仅 发 布 快 ， 更 新 容易 ， 而 且 尽 可 能 采用 了 彩色 图 片 (即使 有 的 书 纸 质 版 是 黑 日 印 
刷 的 ) 。 读 者 还 可 以 方便 地 进行 搜索 、 和 剪贴 、 复 制 和 打 。 


图 灵 社 区 进一步 把 传统 出 版 流程 与 电子 出 版 业务 紧密 结合 ， 目 前 已 实现 作 译 者 网 上 
交 稿 、 编 辑 网 上 审 稿 、 按 章 发 布 的 电子 出 版 模式 。 这 种 新 的 出 版 模式 ， 我 们 称 之 为 
敏捷 出 版 ”， 叱 可 以 让 读者 以 较 快 的 速度 了 解 到 国外 最 新 扩 术 图 书 的 内 容 ， 吹 补 
以 往 翻译 版 技术 书 “ 出 版 即 过 时 ”的 缺憾 。 同 时 ， 敏 捷 出 版 使 得 作 、 译 、 编 、 读 的 
交流 更 为 方便 ， 可 以 提前 消灭 书稿 中 的 销 误 ， 最 大 程度 地 保证 图 书 出 版 的 质量 。 


开放 出 版 平台 


图 灵 社 区 同 读 者 开放 在 线 写 作 功 能 ， 协 助 你 实现 目 出 版 的 梦想 。 你 可 以 联合 二 三 好 
友 共 同 创作 一 部 扩 术 参考 书 ， 以 免费 或 收费 的 形式 提供 给 读者 ， 这 极 大 地 降低 了 出 
版 的 门槛 。 成 熟 的 书稿 ， 有 机 会 入选 出 版 计划 ， 同 时 出 版 纸 质 书 。 


图 灵 社 区 引进 出 版 的 外 文 图 书 ， 痢 将 在 立项 后 马上 在 社区 公布 。 如 果 有 蕊 翻译 哪 本 
图 书 ， 欢 迎 来 社区 申请 。 只 要 通过 试 译 的 考验 ， 即 可 侈 约 成 力图 灵 的 译 者 。 当 然 ， 
要 想 成 功 地 完成 一 本 书 的 翻译 工作 ， 是 需要 有 坚强 的 妆 力 的 。 


读者 交 帝 平 合 

在 图 灵 人 社区 ， 读 者 可 以 十 分 方便 地 写作 文章 、 提 交 勘 误 、 发 表 评 论 ， 以 各 种 万 式 与 
作 译 者 、 编 辑 人 员 和 其 他 读者 进行 交流 互动 。 提 交 勘 误 还 能 够 获 赠 社区 银子 。 欢 迎 
大 家 积极 参与 社区 开展 的 访谈 、 审 谈 、 评 选 等 多 种 活动 ， 赢 取 银 子 ， 可 以 换 书 哦 


图 灵 社 区 会 员 wenshanjun 专 享 尊重 版 权 


